background-image: radial-gradient(100px at center, yellow, green); } /*中心点在左上角*/ div:nth-child(3) { background-image: radial-gradient(at left top, yellow, green); } div:nth-child(2) { background-image: radial-gradient(at 50px 50px, yellow, green); } /*设置不同的颜色...
background-color: red; /* 红色 */ 1.2 opacity属性 opacity属性用于设置元素的透明度。其取值范围为0到1之间,其中0表示完全透明,1表示完全不透明。其语法为: opacity: value; 例如: opacity: 0.5; /* 50%透明度 */ 二、设置背景图片 2.1 background-image属性 background-image属性用于设置元素的背景图片。
background-image功能比较单一,无法设置透明度,如果直接用opacity强行设置,会导致整个盒子都变得透明。 解决办法: 1.利用线性渐变函数linear-gradient(),在里面可以设置填充图片,把颜色设置成空透明度图层,再针对图片设置透明度,即可实现透明的背景图层。 2.利用伪元素贴上一张宽高等于盒子的图片,因为是图片所以可以设置透...
一、opacity属性 在CSS3中,我们可以使用opacity属性来控制元素的透明度。 语法:opacity:数值; 说明: opacity属性取值范围为0.0~1.0,0.0表示完全透明,1.0 表示完全不透明(默认值)。 opacity属性取值不可以为负数。 透明度opacity属性用得也比较广泛,很多时候都是配合 :hover伪类来定义鼠标移动到某个按钮或图片上时,改变...
可以看到,背景四有一部分透明的效果,rgba中的a可以简单理解成透明度,但是它跟opacity不一样的地方在于,rgba的alpha不会影响元素上面的文字等等内容,而opacity则会使得元素上面所有的内容都变得透明。 还是来看实际例子比较直观 .bg-opaticy{color:#fff;font-size:30px;font-weight:bold;background-color:#000;opacity...
使用CSS滤镜(filter): CSS的filter属性可以应用于元素,包括opacity滤镜。但需要注意的是,它会同时影响元素及其子元素。因此,虽然这种方法可以实现背景图片的透明度,但通常不是最佳选择,除非你确实需要整个元素(包括其内容)都具有透明度。 css .box { width: 300px; height: 200px; background-image: url('image.jp...
.css-bg-example-2 .demo-wrap{position:relative;}.css-bg-example-2 .demo-wrap:before{content:' ';display:block;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0.6;background-image:url('https://assets.digitalocean.com/labs/images/community_bg.png');background-repeat:no-repea...
3. CSS颜色 一、opacity属性 在CSS3中,我们可以使用opacity属性来控制元素的透明度。 语法: opacity:数值; 说明: opacity属性取值范围为0.0~1.0,0.0表示完全透明,1.0 表示完全不透明(默认值)。 opacity属性取值不可以为负数。 透明度opacity属性用得也比较广泛,很多时候都是配合 :hover伪类来定义鼠标移动到某个按钮或...
CSS3-background-image渐变 实现效果如下: 观察发现鼠标放上去的时候出现了三个变化,渐变背景,文字位移和图片放大。 渐变背景:background-image: linear-gradient(transparent,rgba(0, 0, 0, .6)); // 从transparent白色到0.6透明度的黑色。默认情况下背景遮罩不显示(opacity:0),hover的时候定位到盒子上(opacity:...
The background property in CSS is a shorthand property that allows you to set various background-related properties in one declaration. These properties include background color, background image, background repeat, background attachment, and background position. To manipulate the opacity of a back...