CSS背景-图像-不透明度

与How do I give text or an image a transparent background using CSS?有关,但略有不同。

How do I give text or an image a transparent background using CSS?有关,但略有不同。

我想知道是否可以更改背景图像的 alpha 值,而不仅仅是颜色。显然,我可以使用不同的 alpha 值保存图像,但我希望能够动态调整 alpha。

到目前为止,我得到的最好的是:

<div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

它的工作原理,但它的体积和丑陋,并在更复杂的布局搞砸了事情。

47

你可以做褪色的背景与 CSS 生成的内容

Demo athttp://jsfiddle.net/gaby/WktFm/508/ Html
<div class="container">
        contents
</div>
Css
.container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('path/to/image.ext');
    opacity:0.4;
}

但是您不能修改不透明度,因为我们不允许修改生成的内容。

您可以使用类和 css 事件来操作它(但不确定它是否符合您的需求

例如

.container:hover:before{
    opacity:1;
}
UPDATE

您可以使用 CSS 过渡动画的不透明度(再次通过类

demo athttp://jsfiddle.net/gaby/WktFm/507/

正在添加

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

.container:before规则将使不透明度在一秒钟内变为 1。

兼容性

FF 5(也可能是 4,但未安装。

IE 9 失败。

基于 Webkit 的浏览器失败(Chrome 现在支持它 v26-也许更早的版本,但只是检查了我当前的构建),但他们知道并正在努力(https://bugs.webkit.org/show_bug.cgi?id=23209

..所以目前只有最新的 FF 支持它..但是一个好主意,不?:)

23
.class {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
}

复制自:http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

18

如果背景不需要重复,你可以使用 sprite 技术(滑动门),你把所有具有不同不透明度的图像放入一个(彼此相邻),然后用background-position移动它们。

或者,如果您的目标浏览器支持multiple backgrounds(Firefox 3.6 +,Safari 1.0 +,Chrome 1.3 +,Opera 10.5 +,Internet Explorer 9 +),您可以多次声明相同的部分透明的背景图像。

这个合并透明度的过程称为Alpha Blending,计算方式为(感谢 @ IainFraser):

αᵣ = α₁ + α₂(1-α₁)其中α介于 0 和 1 之间。

15

试试这个技巧..使用 css 阴影与(插入)选项,并使深 200px 例如

代码:

box-: inset 0px 0px 277px 3px #4c3f37;

.

对于所有浏览器:

-moz-box-: inset 0px 0px 47px 3px #4c3f37;
-webkit-box-: inset 0px 0px 47px 3px #4c3f37;
box-: inset 0px 0px 277px 3px #4c3f37;

并增加数量以填充您的框:)

享受

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(701)
如何在ASP.NETCore6WebAPI中添加端点
上一篇
使用CSS设置电子邮件链接/href= "mailto:" 的样式
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(47条)