图像框 - 阴影定位
[英]Image Box-Shadow Positioning
问题描述
我希望我的屏幕具有此box-shadow属性，因此有一个包含屏幕内所有内容的框。 我还想将图像作为着陆部分放置，图像将会脉动，然后淡入网页的其余部分。 我无法将图像置于我创建的框中。
不知道该怎么做
body { font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; margin: 0; background: #eee; height: auto; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } main { max-width: 900px; margin: auto; box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.2); } #landing { background: white; } i { background: rgb(0, 0, 0); border-radius: 20px; font-size: 25px; position: relative; margin-right: 10px; border-radius: 50%; display: inline-block; padding: 10px; } img { display: block; }
<body> <main> <!--Landing Page--> <div id="landing"> <div id="landing-image"> <i><img src="/img/diamond"></i> </div> </div> <!--Navigation Page--> <section id="navigation"> </section> <!--Developer Page--> <section id="developer"> </section> <!--Projects Page--> <section id="projects"> </section> <!--Contact Page--> <section id="contact"> </section> </main> </body>
我希望钻石和它周围的圆圈更小，并且在屏幕的框中间。
1 个解决方案
解决方案1
0 2019-06-14 05:44:44
添加此CSS以将图像和圆对齐到中心。
#landing-image {
text-align: center;
}
为了减小尺寸，您可以使用框和图像的高度 ， 宽度 CSS属性。
盒子阴影在图像上？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.