首页 >>  正文

css设置背景透明

来源:baiyundou.net   日期:2024-09-20

在建企业网站时使用CSS边框圆角是很容易的事,但要设置边框圆角的渐变效果就需要费些功夫了,需要正确理解几个CSS属性的含义,background-origin,background-clip,background-size这几个是必须用到的,调整好性能的数值就可以灵活运用了。

想要实现CSS圆角渐变并匹配内容背景图可以参考以下代码:

<style>\ndiv {\n width: 500px;\n height: 300px;\n margin: 10px;\n padding: 30px;\n border-radius: 50px; /*设置圆角*/\n border:50px solid transparent; /*设置边框颜色透明,确保背景渐变色显示*/\n background-origin:border-box; /*从边框开始背景图*/\n background-clip:padding-box,border-box; /*设置第一个背景和第二个背景的范围*/\n background-size:cover;\n /*由于背景图像不能设置纯色,所以可以使用下面的方式设置纯色*/\n background-image:linear-gradient(#fff, #fff),linear-gradient(#FC0, #F30); \n}\n.a1{display:block;height:280px;background-image:url(/images/school.jpg);\nbackground-repeat:no-repeat;background-size:contain;}\n</style>\n\n<div>\n<span class="a1">边框渐变色从内边框到边框,背景图像单独设置不重复。</span>\n</div>

background-origin表示的是背景起始位置,其三个值如下,依次是

border-box 从边框开始;
padding-box(默认) 从内边距开始;
content-box 从内容开始。

background-origin: border-box | padding-box(默认) | content-box

background-clip表示的是背景填充位置,其四个值如下,依次是

border-box(默认) 填充至边框;
padding-box 填充至内边距;
content-box 填充之内容;
text 作为字体前景色。

background-clip: border-box(默认) | padding-box | content-box | text

background-size表示的是背景尺寸,其五个值如下,依次是

contain 将图像扩大至适应最短的边,剩余部分默认重复图像
cover 将图像扩大至适应最长的边,图像可能显示不完整
length 两个值依次设置图像宽和高,未设置则为auto
percentage 两个百分比依次设置图像宽和高,未设置则为auto
auto 默认设置


","gnid":"9f19be23b1a296672","img_data":[{"flag":2,"img":[{"desc":"","height":"520","title":"","url":"https://p0.ssl.img.360kuai.com/t0164e59213d7bf89c1.jpg","width":"850"}]}],"original":0,"pat":"art_src_0,fts0,sts0","powerby":"cache","pub_time":1694701312000,"pure":"","rawurl":"http://zm.news.so.com/77e22cc57aaea8bc852b42bd9b04af8b","redirect":0,"rptid":"29b0ae90a6d57f71","rss_ext":[],"s":"t","src":"三七一网络","tag":[],"title":"在网页设计过程中正确理解css圆角边框及背景图

松轻瑶1786在css中怎样让文字的背景色透明? -
温帖倪15849196948 ______ 设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了.例如: 不透明 div{-moz-...

松轻瑶1786网页中怎么使用css设置背景的透明度网页中 ?网页中怎么
温帖倪15849196948 ______ 请采纳我的答案. 既然Moz Family支持Alpha透明的PNG,所以我们没有必要使用其私有属性了.当然,你可以使用标准的opacity,但别同时使用Alpha透明图片和opacity,这样的话就成了两者的混合了.你可以把上面的例子下载过来,然后/*opacity:.5;*/的注释看看

松轻瑶1786在CSS中,如何设置网页元素的透明度? -
温帖倪15849196948 ______ opacity: 0.4; //ie9+和非ie透明 background:rgba(0, 0, 0, 0.4); //背景透明 filter:alpha(opacity=40);ie6,7,8

松轻瑶1786css如何设置透明度(兼容ie,firefox) -
温帖倪15849196948 ______ css设置透明度,首先需要知道的是在浏览器中的不同使用,一般在ie中用的是filter:alpha(opacity=0);这个属性来设置div或者是块级元素的透明度,而在firefox中,一般就是直接使用opacity:0,对于兼容的,一般的做法就是在书写css样式的将2...

松轻瑶1786在CSS中使用什么方式设置网页元素的透明度? -
温帖倪15849196948 ______ opacity:从0-1透明底依次减弱.例如: div { opacity:0.5; } 所有浏览器都支持 opacity 属性. IE8 以及更早的版本支持替代的 filter 属性.例如:filter:Alpha(opacity=50).

松轻瑶1786css 用滤镜设置背景为透明色
温帖倪15849196948 ______ 刚好,我曾经做过这个功能,和你分享下. 黑白照片 filter: gray; X光照片 filter: Xray; 风动模糊 filter: blur(add=true,direction=45,strength=30); 正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3); 半透明效果 filter: ...

松轻瑶1786如何用CSS把下拉菜单背景色弄成透明而上面的文字不透明 -
温帖倪15849196948 ______ 背景图定位用background-position其值有top、center、bottom,如将图直接放网页正中body{background:url(image.jpg); background-repeat:no-repeat; background-position:center center;},如果不设置容器背景此容器就是透明的了!

松轻瑶1786css中如何将flash的背景色设为透明 -
温帖倪15849196948 ______ 不是在css里加<param name="quality" value="high" />在这段下面加 <param name="wmode" value="transparent" />

松轻瑶1786使用css设置背景透明,文字不透明? -
温帖倪15849196948 ______ filter:Alpha(Opacity="80"); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8;background-color:rgba(255,255,255,0.1)!important;

松轻瑶1786css如何让层背景颜色半透明 -
温帖倪15849196948 ______ { filter: Alpha(Opacity=50) /* for IE */ background-color: rgba(0, 0, 0, 0.5); /*for FF*/ }

(编辑:自媒体)
关于我们 | 客户服务 | 服务条款 | 联系我们 | 免责声明 | 网站地图 @ 白云都 2024