gpt4 book ai didi

css - 使用图像渲染 CSS3 嵌入阴影

转载 作者:技术小花猫 更新时间:2023-10-29 10:39:22 25 4
gpt4 key购买 nike

我想为我正在工作的网站利用新的 CSS3 框阴影功能。问题是如果内部有 img(边框隐藏在图像区域周围),Chrome 9.0.5 和 Opera 10 无法正确呈现插入边框。

我知道 box-shadow 仍在开发中,但我希望浏览器能够完全支持它或完全忽略它。

<!doctype html>
<html>
<head>
<style>
div {
border: 1px solid black;
width: 300px;
height: 200px;
overflow: hidden;

// CSS3 inset shade
-moz-box-shadow: inset 0 0 20px red;
-webkit-box-shadow: inset 0 0 20px red;
box-shadow: inset 0 0 20px red;
}
</style>
</head>
<body>
<div>
<img src="http://www.google.com/images/logos/ps_logo2.png" width="364" height="126" alt="" />
</div>
</body>
</html>

有人知道正确渲染红色阴影的一些变通方法吗?

谢谢!

编辑:我对答案很满意,但只是想添加一个实时链接来帮助那里的其他人。 Here it is

最佳答案

使用 inset 时,Box-shadow 在堆叠顺序上正好位于背景之上。因此,div 中的任何图像都会覆盖阴影。

根据 W3C Specs

In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).

换句话说,Chrome 和 Opera 做的是正确的(FTR、FF 3.6.13 做的和 Opera 一样)。

如果您希望阴影与图像重叠,您有几个不同的选择,具体取决于您的需要:

  1. 将图像设置为 div 的 background 属性。
  2. 绝对将 div 放在带有图像的 div 上,使其大小相同,然后将阴影放在那里(不推荐,因为它很复杂并且添加了非语义标记)。
  3. 确保图片的背景是透明的(这样可以让阴影透过,但不透明的像素仍会覆盖阴影)。
  4. 考虑改用边框图像和渐变。 (这个也有点复杂,但是将渐变放在边框本身中,您可以使用 RGBA 淡化为透明。)

关于css - 使用图像渲染 CSS3 嵌入阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5076045/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com