是否可以使用 css 将图像添加为框阴影?
Posted
技术标签:
【中文标题】是否可以使用 css 将图像添加为框阴影?【英文标题】:Is it possible to add image as box shadow with css? 【发布时间】:2017-12-19 05:06:25 【问题描述】:是否可以将图像添加为框阴影,例如将图像放置为带有点而不是标准阴影?
https://i.stack.imgur.com/DOJGh.png
或者以某种方式用点替换图片中的阴影?
在下面的图片上得到这样的效果
http://prntscr.com/fvjnht
【问题讨论】:
box-shadow on img in CSS的可能重复 不是重复的。他不想要一个图像的箱形锯,他想要一个图像作为箱形阴影。 【参考方案1】:有点像this?
.image_carousel img
margin-right: 14px;
display: block;
float: left;
box-shadow: 3px 3px 1px #ccc;
-webkit-box-shadow: 3px 3px 1px #ccc;
-moz-box-shadow: 3px 3px 1px #ccc;
<div class="image_carousel"><img src="//placehold.it/300/f80/fff" alt=""/></div>
归功于Joseph Marikle。
【讨论】:
【参考方案2】:你想要这样的东西吗?不完全是box-shadow
,但它模仿了它。
您可以将任何您喜欢的图像设置为background
为.image::after
。
html, body
margin: 0;
body
width: 100vw;
height: 100vh;
.contain
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.image
position: relative;
width: 200px;
height: 200px;
background-image: url(http://via.placeholder.com/200x200);
.image::after
content: '';
background: linear-gradient(to bottom, #333, red);
position: absolute;
width: 100%;
height: 100%;
bottom: -10px;
right: -10px;
z-index: -1;
<div class="contain">
<div class="image"></div>
</div>
【讨论】:
【参考方案3】:像这样?
span
border: 2px dotted red;
display: inline-block;
img
padding: 0;
margin: 0;
display: block;
<span class="dotted-border"><img src="http://placehold.it/200"/></span>
【讨论】:
【参考方案4】:我认为这正是您正在寻找的:
body
background: black;
#logo
width: 200px;
height: 200px;
display: block;
position: relative;
#logo::after
content: "";
background: url("https://rfclipart.com/image/big/3f-a9-1a/red-dotted-halftone-background-Download-Royalty-free-Vector-File-EPS-183199.jpg");
opacity: 0.4;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
border-radius: 50%;
z-index: -1;
img
width: 90%;
height: 90%;
padding: 5%;
display: block;
float: left;
border-radius: 50%;
box-shadow: 0px 0px 40px #ccc;
-moz-box-shadow: 0px 0px 40px #ccc;
-webkit-box-shadow: 0px 0px 40px #ccc;
<div id="logo">
<img src="http://icons.iconarchive.com/icons/graphicloads/colorful-long-
shadow/256/User-icon.png" />
</div>
【讨论】:
以上是关于是否可以使用 css 将图像添加为框阴影?的主要内容,如果未能解决你的问题,请参考以下文章