如何在背景图片上制作透明边框（使用CSS）？
[英]How do you make a transparent border (with CSS) that goes over a background image?
问题描述
I want to make a border around my div that is transparent. 
我想在我的div周围做一个透明的边框。 I want the background image to show through the transparent border. 我希望背景图片通过透明边框显示。 In my picture, you can see that my code makes a transparent border, but the white shows through instead of the background image. 在我的图片中，您可以看到我的代码制作了透明边框，但是白色显示了背景而不是背景图像。 No matter what size I make the border, it basically increases the white space to fit the border. 无论我制作边框的大小如何，基本上都会增加适合边框的空白空间。
The following is my code that includes the border of .mainbody and the background image. 以下是我的代码，其中包括.mainbody的边框和背景图片。 I'm thinking that maybe, something my code is interfering with the border transparency over the background image. 我在想，也许是我的代码干扰了背景图像的边框透明度。
.mainbody {
max-width: 1500px;
height: auto;
background: white;
margin-top: -27px;
border: 10px dashed rgba(236, 200, 236, .5);
}
body {
background: url("https://scenesfromphiladelphia.files.wordpress.com/2010/02/026.jpg");
background-size: cover;
background-position: center;
text-align: left;
text-indent: 50px;
color: 000000;
font-family: Bree Serif;
max-width: 800px;
margin: auto;
}
1 个解决方案
解决方案1
0 2015-02-02 21:11:49
Maybe it helps you 也许对你有帮助
* {
box-sizing: border-box;
}
.mainbody {
position: relative;
max-width: 1500px;
height: auto;
padding: 10px;
}
.other {
border: 10px dashed rgba(236, 200, 236, .5);
position: absolute;
background: transparent;
opacity: .5;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
body {
background: url("https://scenesfromphiladelphia.files.wordpress.com/2010/02/026.jpg");
background-size: cover;
background-position: center;
text-align: left;
text-indent: 50px;
color: 000000;
font-family: Bree Serif;
max-width: 800px;
margin: auto;
}
And the HTML: 和HTML：
<body>
<div class="mainbody">Hello<div class="other"></div></div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.