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...
1>border-image-source:设置图片的来源。使用绝对或者相对地址或者渐变色来确定图片。 2>border-image-slice :设置边框背景图的分隔方式。取值:数值/百分比 fill.该属性指定从上右下左来分割图片,将图像分成4个角,4条边以及中间区域。中间区域始终是透明的,除非使用关键字fill。 3>border-image-width:设置边框背景的...
filter:alpha(opacity=50):一般也会加上这个滤镜用于支持ie浏览器(选值0~100) background-image:url(图片路径) 一般设置背景图片时同时指定背景颜色 background-repeat:设置是否重复背景图 repeat 重复图片 no-repeat 不重复,只一张 repeat-x 只横排重复 ...
div{ background-image: url(img.png); opacity:0.4; filter:alpha(opacity=40);/* 针对 IE8 以及更早的版本 */ } 无法改变图片本身的透明度，那只能改变整个DIV的透明度来达到类似的视觉效果：1.opacity属性 2.如果兼容性允许的话使用css3滤镜-webkit-filter（有别于之前的IE滤镜）。看下这个...
1.2 opacity属性的使用 opacity属性用来设置元素及其内容的透明度,可以取值为0~1之间的任意数值,其中0表示完全透明,1表示完全不透明。通过设置元素的opacity属性,我们可以实现元素及其内容的透明效果。 2. 使用CSS实现背景图片透明度效果 在实际的网页设计中,我们可以通过以下几种方法来使用CSS实现背景图片的透明度效果。
Opacity 0.500 (1~0) 透明度 Image opacity to blender the image against the background color 使图片从背景颜色中区分出来的混合图片透明度 Back/Front (按钮) 背景/前景 Draw under or over the everything 把图片放置在所有东西的下面或上面(作为背景或作为前景) ...
可以看到,背景四有一部分透明的效果,rgba中的a可以简单理解成透明度,但是它跟opacity不一样的地方在于,rgba的alpha不会影响元素上面的文字等等内容,而opacity则会使得元素上面所有的内容都变得透明。 还是来看实际例子比较直观 .bg-opaticy{color:#fff;font-size:30px;font-weight:bold;background-color:#000;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有...