Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >视频背景上的顺风css图案

问视频背景上的顺风css图案
EN

Stack Overflow用户

提问于 2021-10-15 07:22:36

回答 1查看 486关注 0票数 0

我是新手尾风，我有一个视频背景页面(基于帖子https://daily-dev-tips.com/posts/tailwind-css-full-screen-video-header/)，我试图添加一个模式( http://www.patternify.com/ )的顶部的视频背景。我尝试了几种不同的方法，但它们都与背景的位置产生了奇怪的东西。

有人能告诉我在Tailwind中应该怎么做吗？

云直播特惠9.9元起

基于腾讯云多年音视频能力积淀，支持超低延迟、超高画质、超大并发访问量的直播需求，满足客户的多样化直播需求

EN

回答 1

Stack Overflow用户

发布于 2021-10-16 12:13:11

您可以使用relative和absolute实用程序类将超文本标记语言放置在视频上，如下例所示。iframe div包装了您需要的absolute视频。您可以使用width w-{size}和height h-{size}类来定位所需的图案并更改其大小。

<div class="relative">
  <div class="relative h-20 w-20 left-40 top-24 z-10" style="background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAGtJREFUKFNjZICCpkN+/+vsNjGCuMaZ1/4faYlg4BS+BOeDGYQUnZ2uxchIjCKQYWATcVkHMglmI043ISsCuZ0Rm8PRFYGt/v5W7z+y77ApAhmG4kZcinbVtkA8A9KBT5Gw1DKIGwkpAhkGAJGtf6rUDvXfAAAAAElFTkSuQmCC) repeat;"></div>
  <div class="absolute top-0 w-full">
    <iframe width="800" height="600" src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

您可以查看下一个实演中的示例。https://play.tailwindcss.com/QjG6jhiIdN

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69587058

复制

相关文章

创建具有视频背景的网站| HTML和CSS

html css 网站

创建具有视频背景的网站| HTML和CSS 。使用HTML和CSS在您的网站上添加Glass效果。为初学者学习HTML的简便方法

海拥

2021/08/23

2K0

创建具有视频背景的网站| HTML和CSS

【CSS】CSS 背景设置 ⑦ ( 背景简写 )

css background 语法

使用 CSS 样式设置盒子背景时 , 需要设置多个 CSS 样式 , 设置背景图片 , 平铺模式 , 定位方式 , 附着方式等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ;

韩曙亮

2023/03/30

2.8K0

【CSS】CSS 背景设置 ⑦ ( 背景简写 )

【CSS】CSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )

css background repeat rgb 语法

CSS 的背景颜色样式语法 : 默认的背景颜色是 transparent 透明 ;

韩曙亮

2023/03/30

6.2K0

【CSS】CSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )

【CSS】CSS 背景设置 ⑨ ( 背景半透明设置 )

css alpha 语法

在使用时 , 可以省略 0.x 前面的 0 , 直接使用 .x 作为透明度值 , 如 :

韩曙亮

2023/03/30

3.3K0

【CSS】CSS 背景设置 ⑨ ( 背景半透明设置 )

CSS——背景

attachment background image repeat size

定义背景(Background）属性是对HTML元素的背景进行定义的CSS属性。概述通过边框和背景的样式设置，给元素增加更丰富的外观背景的设置包含以下内容: 背景填充内容背景填充内容可以是一个固定颜色(background-color属性),可以是图像和渐变(background-image属性) 背景填充方式当背景是图像的时候，可以指定图像的平铺方式(backgroundrepeat属性) 背景填充范围列表元素描述 background background 包括background

Html5知典

2019/11/26

1K0

【CSS】CSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )

css background center position 语法

background-position 属性值可以是 length 长度 , 也可以是 position 方位 ;

韩曙亮

2023/03/30

4.2K0

【CSS】CSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )

CSS渐变背景

.member-top { -webkit-animation:changeBg 20s infinite; -moz-animation:changeBg 20s infinite; animation:changeBg 20s infinite;background-color:#ED5564; background-image: url(member_top_bg.png); background-size: cover; text-align: center; width: 100%; height: 11rem; position: relative; z-index: 1;} @-webkit-keyframes changeBg{ 0%{background-color:#ED5564;} 10%{background-color:#FB6E52;} 20%{background-color:#FFCE55;} 30%{background-color:#A0D468;} 40%{background-color:#48CFAE;} 50%{background-color:#4FC0E8;} 60%{background-color:#5D9CEC;} 70%{background-color:#AC92ED;} 80%{background-color:#EC87BF;} 90%{background-color:#ED5564;} } @-moz-keyframes changeBg{ 0%{background-color:#ED5564;} 10%{background-color:#FB6E52;} 20%{background-color:#FFCE55;} 30%{background-color:#A0D468;} 40%{background-color:#48CFAE;} 50%{background-color:#4FC0E8;} 60%{background-color:#5D9CEC;} 70%{background-color:#AC92ED;} 80%{background-color:#EC87BF;} 90%{background-color:#ED5564;} } @keyframes changeBg{ 0%{background-color:#ED5564;} 10%{background-color:#FB6E52;} 20%{background-color:#FFCE55;} 30%{background-color:#A0D468;} 40%{background-color:#48CFAE;} 50%{background-color:#4FC0E8;} 60%{background-color:#5D9CEC;} 70%{background-color:#AC92ED;} 80%{background-color:#EC87BF;} 90%{background-color:#ED5564;} }

星宇大前端

2019/01/15

2.1K0

css 背景透明

今天在开发一个漂浮在背景图上方的模态动画，之前只记得opacity和rgba可以实现透明度设置，但是在实现“背景透明，文字不透明”的效果中却不是都可行的，下面我们就来实际测试一下。

IT工作者

2022/02/15

2.9K0

CSS背景(background)

php javascript css

背景颜色(color) 语法： background-color:颜色值; 默认的值是 transparent 透明的背景图片(image) 语法： background-image : none | url (url) 参数作用 none 无背景图（默认的） url 使用绝对或相对地址指定背景图像 background-image : url(images/demo.png); 小技巧：我们提倡背景图片后面的地址，url不要加引号。背景平铺（repeat）语法： backgroun

乐心湖

2020/07/31

1.5K0

【CSS】CSS 背景设置 ⑥ ( 背景附着 | background-attachment )

css attachment background scroll 语法

background-attachment 属性值设置 : scroll 或 fixed 二选一 ;

韩曙亮

2023/03/30

1.6K0

【CSS】CSS 背景设置 ⑥ ( 背景附着 | background-attachment )

CSS 背景(background)

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

星辰_大海

2020/09/30

2.2K0

【CSS】：颜色、背景

css https 网络安全网站

CSS 数据类型 <color> 表示一种标准RGB色彩空间（sRGB color space）的颜色。一种颜色可以用以下任意的方式来描述：

WEBJ2EE

2020/03/02

2.9K0

【CSS】CSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

css html center text

在 div 盒子中的 a 标签是行内元素 , 为其设置宽高是无效的 , 首先要将其转为行内块样式 ;

韩曙亮

2023/03/30

4.6K0

【CSS】CSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

在CSS3之前我们对背景图片的控制极为有限，只能决定其来源、位置、重复，CSS3的到来对背景的使用开辟了一片新天地。 1、background-size 在 CSS3中，background-size 属性规定背景图像的尺寸。这就允许我们在不同的环境中重复使用背景图片，以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 length:设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto。 percentage: 以父元素的

小胖

2018/06/27

1K0

pycharm的背景颜色设置_css中设置背景颜色

https java 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/174387.html原文链接：https://javaforall.cn

全栈程序员站长

2022/09/27

7.4K0

pycharm的背景颜色设置_css中设置背景颜色

文本属性,边界圆角,背景属性,精灵图案例

border center height line text

整体设置font: bold 10px/300px '黑体', 'Arial'; 分别是字重,字体大小,行高,字族,顺序可以交换不影响

小小咸鱼YwY

2019/09/11

5160

【CSS】背景样式：background

面向对象编程

本节主要关注背景如何展示。 background 在一个声明中设置所有背景属性。 div{ background: #00FF00 url(bgimage.gif) no-repeat fixed top; } 可以按顺序设置如下属性： background-color background-position background-size background-repeat background-origin background-clip background-attachment backgrou

毛大姑娘

2021/05/08

1.7K0

在CSS3中，背景定位得到了扩展，它允许我们指定背景图片在距离任意角的偏移量，只需要在偏移量前面指定关键字

踏浪

2019/07/31

7660

【CSS】格仔背景

CSS代码 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body { background: #fff; background-image: linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0), linear-gradient(45deg, #000 25%, transparent 0, transparent

企鹅号小编

2018/02/08

1.2K0

点击加载更多

相似问题

纯CSS图案背景？

13

顺风CSS布局失去背景

311

CSS背景渐变图案-虚线

33

CSS背景上方渐变图案

37

顺风css背景渐变不应用

111

活动推荐

云联络中心专属优惠，福利大放送！

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例