background-image功能比较单一,无法设置透明度,如果直接用opacity强行设置,会导致整个盒子都变得透明。 解决办法: 1.利用线性渐变函数linear-gradient(),在里面可以设置填充图片,把颜色设置成空透明度图层,再针对图片设置透明度,即可实现透明的背景图层。 2.利用伪元素贴上一张宽高等于盒子的图片,因为是图片所以可以设置透...
html { background-image:url(../img/sea.jpg); background-size: 100%; opacity: 0.5; } .navigation { background-color: grey; list-style: none; padding-left: 0; position: fixed; text-align: center; top:300px; width: 100%; } .navigation li{ display: inline-block; height:20px; widt...
initial-scale=1.0">Background Image Opacity.container{position:relative;width:100%;height:400px;background:url('https://static.deepinout.com/gk-static/logo.png')no-repeat center center;background-size:cover;}.overlay{position:absolute;top:0;left:0;width:100%;height:100%...
p{background-color:rgba(255,0,0,0.5);} 3.2 opacity属性 在CSS3中,使用 opacity属性能够使任何元素呈现出透明效果。其语法格式为 1 opacity:opacityValue; 在上述语法中, opacity属性用于定义元素的不透明度,参数 opacityValue表示不透明度的值,它是一个介于0~1的浮点数值。其中,0表示完全透明,1表示完全不透明...
##background 的常见背景属性 css2.1中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff;设置元素的背景颜色。 background-image:url(images/2.gif);将图像设置为背景。 background-repeat: no-repeat;设置背景图片是否重复及如何重复,默认平铺满。(重要) ...
.king:before{position:absolute;content:'';display:block;width:100%;height:100%;top:0;z-index:1;background-repeat:no-repeat;opacity:0.4;}.king:before{background-image:radial-gradient(circle,#fff20%, transparent20%),radial-gradient(circle, transparent20%,#fff20%, transparent30%),radial-gradien...
.bg-color-4{color:#fff;background-color:rgba(0,0,0,0.3);}背景四 可以看到,背景四有一部分透明的效果,rgba中的a可以简单理解成透明度,但是它跟opacity不一样的地方在于,rgba的alpha不会影响元素上面的文字等等内容,而opacity则会使得元素上面所有的内容都变得透明。 还是来看实际例子比较直观 .bg-opaticy{col...
CSS3-background-image渐变 实现效果如下: 观察发现鼠标放上去的时候出现了三个变化,渐变背景,文字位移和图片放大。 渐变背景:background-image: linear-gradient(transparent,rgba(0, 0, 0, .6)); // 从transparent白色到0.6透明度的黑色。默认情况下背景遮罩不显示(opacity:0),hover的时候定位到盒子上(opacity:...
镂空效果最简单的方法就是使用 mask-image；4、透明层效果使用 background-color: rgba() 或 opacity...
css的opacity属性可以设置图片的透明属性, #div{ background-image: url(img.png); opacity:0.4; filter:alpha(opacity=40);/* 针对 IE8 以及更早的版本 */ } 具体可以看下这个链接:http://www.w3school.com.cn/css/css_image_transparency.asp有...