html - 我怎样才能使这个背景与阴影?
问题描述
我有一个包含图像和叠加层的 div:
<div class="container">
<div class="overlay"></div>
<img src="tablet.png" alt="tablet">
</div>
解决方案
虽然它肯定可以通过 CSS 或 SVG 完成,但阴影很可能只是已经绘制阴影的背景图像。
但是,这是一个示例,说明您如何在 css 中考虑它:
.scene {
position: relative;
width: 200px;
height: 200px;
background: #60c18b;
overflow: hidden;
}
.object {
position: absolute;
width: 40px;
height: 45px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_121330.png&f=1);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: top left;
}
.object:after, .object:before {
content: '';
display: block;
width: 100%;
height: 100px;
background: linear-gradient(rgba(0,0,0,0.3), transparent);
transform: skew(-45deg, 0deg);
transform-origin: top left;
position: absolute;
}
.object:before {
transform: translateY(2px) skew(0deg, -45deg);
transform-origin: top right;
width: 100px;
height: 100%;
position: absolute;
right: 0;
background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
}
<div class="scene">
<div class="object"></div>
</div>
请注意,这只是为了好玩,它并不完美,我不会在生产站点上使用它。
推荐阅读
- c# - 如何在不使用 ChartArea ASP.NET MVC 的情况下在图表上显示所有 X 值
- google-cloud-spanner - 一张桌子如何与两张桌子交错?
- apache-spark - 我们可以在 AWS Glue 中设置 spark.sql.shuffle.partitions 吗?
- react-native - React Native View 上的“elevation”/“zIndex”道具在 Android 上不起作用
- php - 如何将项目符号和产品 SKU 添加到数组列表中的产品标题
- flutter - 即使两个数据相等,如果测试语句为假
- ios - How to perform a segue from a pushed vc that has the segue defined in the storyboard
- slurm - SLURM 错误:sbatch:错误:批处理作业提交失败:请求的节点配置不可用
- node.js - "You may need an appropriate loader" in React and Webpack
- java - JSONObject 未正确更新