首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

CSSCSS 背景设置 ⑨ ( 背景半透明设置 )

文章目录 一、背景半透明设置 1、语法说明 2、代码示例 一、背景半透明设置 ---- 1、语法说明 背景半透明设置 可以 使用 rgba 颜色值设置半透明背景 ; 下面的 CSS 样式中 , 就是...设置黑色背景 , 透明度为 20% ; background: rgba(0, 0, 0, 0.2); 颜色的透明度 alpha 取值范围是 0 ~ 1 之间 , 在使用时 , 可以 省略 0.x 前面的...0 , 直接使用 .x 作为透明度值 , 如 : background: rgba(0, 0, 0, .2); 背景半透明 指的是 盒子的背景设置为半透明 , 可以看到下面的内容 , 盒子里面显示的内容不受背景影响..., 可以看到背后的黄色背景 , 第二个不透明的背景盒子中 , 黄色背景被完全覆盖 ; 代码示例 : 背景半透明设置对照组 展示效果 :

3K20

CSS基础——css 属性

我们知道 css 我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....布局常用样式属性width 设置元素(标签)的宽度,如:width:100px;height 设置元素(标签)的高度,如:height:200px;background 设置元素背景色或者背景图片,如:...文本常用样式属性color 设置文字的颜色,如: color:red;font-size 设置文字的大小,如:font-size:12px;font-family 设置文字的字体,如:font-family...小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;

1.5K21

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。 ?...比如我们需要将上图中页面中间的文字区域变成毛玻璃效果,首先想到的是给其设置一个透明度,并添加模糊滤镜: .content {     background-color: rgba(0,0,0,0.3);...解决这个问题的方法很简单,只需要添加background-attachment: fixed属性,之后为其进行模糊处理。...为了解决这个问题,我们将伪元素的范围扩大一些,同时为了效果不超出content的范围,给其设置overflow:hidden属性。...margin: -30px;} 这样一个比较完美的毛玻璃效果就完成了,无论你如何改变浏览器窗口的尺寸,content部分的背景图都能很好的与背景拼接,这都归功于background-attachment属性

1.9K30

css属性详解

颜色是通过CSS最经常的指定:   十六进制值 - 如: #FF0000     一个RGB值 - 如: RGB(255,0,0)   颜色的名称 - 如:  red   还有rgba(255,0,0,0.3...),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间 二、文本属性 文字对齐   text-align 属性规定元素中的文本的水平对齐方式。...六、css盒子模型 margin:            用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。...用于四边; 提供两个,第一个用于上-下,第二个用于左-右; 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下; 提供四个参数值,将按上-右-下-左的顺序作用于四边; 九、float浮动 在 CSS...#i2 { z-index: 999; } 十三、透明属性 用rgba的方法来设置   这种方式只是改变背景颜色的透明度 .touming { width: 300px

2K101

CSS外观属性

text-align:水平对齐方式 text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。...其可用属性值如下: left:左对齐(默认值) right:右对齐 center:居中对齐 text-indent:首行缩进 text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值...其属性值可为不同单位的数值,允许使用负值,默认为normal。 word-spacing:单词间距 word-spacing属性用于定义英文单词之间的间距,对中文字符无效。...颜色半透明(css3) 文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下:    color: rgba(r,g,b,a)  a 是alpha 透明的意思 取值范围 0~1之间    color...: rgba(0,0,0,0.3)   文字阴影(CSS3)  Shadow 影子 text-shadow:水平位置 垂直位置 模糊距离 阴影颜色; ?

1.1K20

CSS background属性

属性解释 background属性css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: background-color...设置背景图片如何重复平铺 background-position 设置背景图片的位置 background-attachment 设置背景图片是固定还是随着页面滚动条滚动 实际应用中,我们可以用background属性将上面所有的设置项放在一起...写完上来几个属性,如果每个都要单独写的话就比较费劲,下面介绍一下如何生成一行。...简写 background 属性示例 “background:cyan url(bg.jpg) repeat-x”,横向平铺盒子,盒子其他部分显示背景颜色“cyan”。 ? 简写如下: ?

1.3K10

CSS——属性列表

3opacityopacity 该属性规定了一个元素的透明度3 边框 元素描述版本borderborder 属性是规定各种单独的边界属性的简写属性,可用于设置一个或多个以下属性的值:border-width...1font-familyfont - family 属性规定一个元素的字体。1font-kerningfont-kerning 字体字符间距处理 CSS 属性参数控制字符之间的间距。...-font-language-overridefont-language-override 字体-语言-重写 CSS 属性参数控制特定语言的字体中的字形。...1font-variant-alternatesfont-variant-alternates 字体变形候补 CSS 属性参数控制替代符号的用法。...3transition-propertytransition-property 规定应用过渡效果的 CSS 属性的名称。(当规定的 CSS 属性改变时,过渡效果将开始)。

2.5K10

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券