opacity 相关问题

可以吗？就在 CSS 中，就像这张图片一样，所以我的意思是，如果我放置标签背景图像，我需要它从上到下是透明的。我想创建类似于的东西有可能做到吗？就在CSS中，就像这张图片一样，所以我的意思是如果我放上<div>标签背景图像，我需要它从上到下是透明的。我想创建类似于下图的东西：正如其他答案所述：在 CSS 中不可能使图像从上到下透明。但是如果您有纯色背景色（或类似颜色），您可以使用 CSS3 内嵌框阴影来模拟透明度。对于图像白色覆盖和半透明黑色矩形。在下面的演示中，我使用伪元素来最小化 HTML 标记。演示输出： HTML： <div class="image"></div> CSS： .image{ position:relative; height:500px; width:500px; margin:50px auto; background: url('http://lorempixel.com/output/people-q-c-640-480-8.jpg'); background-size:cover; -moz-box-shadow: inset 0px 850px 500px -500px #fff; -webkit-box-shadow: inset 0px 850px 500px -500px #fff; -o-box-shadow: inset 0px 850px 500px -500px #fff; box-shadow: inset 0px 850px 500px -500px #fff; } .image:before,.image:after{ content:''; position:absolute; left:5%; opacity:0.5; } .image:before{ top:0; width:20%; height:100%; -moz-box-shadow: inset 0px 850px 500px -500px #000; -webkit-box-shadow: inset 0px 850px 500px -500px #000; -o-box-shadow: inset 0px 850px 500px -500px #000; box-shadow: inset 0px 850px 500px -500px #000; } .image:after{ width:20%; height:10%; top:100%; background:#000; } 其实，你可以在 webkit 中做到这一点！ Mozilla 允许使用 SVG 蒙版，但我不会深入讨论。 IE 零支持。演示：JSFiddle HTML： <div> <img src="http:/www.fillmurray.com/300/200"/> </div> CSS： div { -webkit-mask-size: 300px 200px; -webkit-mask-image: -webkit-gradient(linear, center top, center bottom, color-stop(0.00, rgba(0,0,0,0)), color-stop(1.00, rgba(0,0,0,1))); } 参考：http://caniuse.com/css-masks 我做了一把小提琴供你使用。您必须将渐变与 rgba 一起使用。并非所有浏览器都支持此功能，因此您可能想要操作图像。然而，这是在 CSS 中做到这一点的唯一方法。这是代码： HTML： <html> <head> </head> <body> <img src="http://upload.wikimedia.org/wikipedia/meta/6/6d/Wikipedia_wordmark_1x.png" /> <div class="whatever"></div> </body> </html> CSS： body { margin:0px; } img { height:30px; position:relative; } .whatever { background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #ff00ff), color-stop(1, rgba(0,0,0,0)) ); background-image: -o-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: -moz-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: -webkit-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: -ms-linear-gradient(bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); background-image: linear-gradient(to bottom, #ff00ff 0%, rgba(0,0,0,0) 100%); height:30px; position:relative; width:100px; top:-34px; } 您应该使用 background CSS 属性以及您自己设置的 linear-gradient 值来满足您的需求。 CSS background: linear-gradient(to bottom, rgba(255,255,255,1) 30%,rgba(0,0,0,0) 100%); 检查这个演示jsFiddle示例我认为根本不可能准确地重现这一点（特别是如果图像的顶部实际上是透明的）。如果您只需要从白色到图像的“透明度”...那就更容易了.. JSfiddle 演示 HTML <div class="wrapper"> <div class="imgwrap"> <img src="http://lorempixel.com/output/nature-q-c-200-200-2.jpg" alt=""/> </div> </div> CSS body { background-color: #bada55; } .wrapper { height:240px; display: inline-block; margin: 25px; border:1px solid grey; background-color: white; padding:8px; } .imgwrap { display: inline-block; position: relative; } .imgwrap:after { position: absolute; content:""; top:0; left:0; width:100%; height:100%; background: linear-gradient(rgba(255,255,255,1) 35%, rgba(255,255,255,0) 100%); z-index:1; } 使用绝对位置和 z 索引在图像上叠加渐变 div： CSS section{ margin:0px 0px; padding:0px 0px; width: 300px; display:block; height: auto; position:relative; } section #overlay{ position:absolute; top:0; left:0; right:0; background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(255,255,255,1)); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* Standard syntax (must be last) */ width:100%; height:100%; z-index:2; } section #imgContainer{ width: 300px; height: auto; margin: 0px 0px; padding: 0px 0px; overflow: hidden; display: inline-block; } section #imgContainer img{ width: 300px; padding: 0; margin: 0; display: block; } HTML <section> <div id="overlay"> </div> <div id="imgContainer"> <img src="" /> </div> </section> 很老的讨论，但最近提出了同样的问题。您只需要创建 2 个容器。外部容器应包含您的背景图像，内部容器将包含渐变（在本例中为白色到透明）： .outer-container { min-height: 100vh; width: 100%; background-image: url('/images/home_bg.png'); background-size: cover; } .inner-container { min-height: 100vh; width: 100%; background: linear-gradient( 150deg, rgba(255, 255, 255, 0.996) 50%, rgba(255, 255, 255, 0) 100% ); } div 结构将是这样的： <div class="outer-container"> <div class="inner-container"> </div> </div>

image css opacity css-shapes

回答 7 投票 0

指针事件+悬停CSS上的不透明度

我正在构建一个网站，其中一个单独的 div 位于另一个 div 之上。当您将鼠标悬停在顶部 div 上时，我希望它在您将鼠标悬停在其上时消失，并且您应该能够单击它。我一开始以为...

html css hover opacity pointer-events

回答 4 投票 0

顺风背景不透明度

我对顺风背景不透明度背后的CSS很好奇。我只能在纯 CSS 中找到“不透明度”，但这会影响所有内容而不仅仅是背景。有人可以解释一下吗？

css background opacity tailwind-css tailwind-ui

回答 5 投票 0

图例中错误栏的符号不透明度问题

一旦我想在网格图中绘制线条和误差条的复杂组合，我就试图在图例中完美地指示符号。我注意到对任何对象应用所需的不透明度并不容易