我可以帮您翻译成中文。这段内容是关于如何在使用CSS边框创建三角形的div上放置背景图片的问题。以下是目前的尝试,它可以正常地使用纯色,但是在使用图片时遇到了困难。
HTML
HTML
<div class="wrapper">
<div class="left triangle"></div>
<div class="right triangle"></div>
</div>
CSS
.wrapper {
padding:50px 0px;
height: 50px;
position: relative;
width: 300px;
background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg");
}
.triangle {
border-bottom: 50px solid #eee;
width: 50px;
position: absolute;
bottom: 0;
}
.right {
right: 0;
border-left: 100px solid transparent;
}
.left {
left: 0;
border-right: 100px solid transparent;
}
jsfiddle: http://jsfiddle.net/aRS5g/9/
因此,看着那个JS Fiddle,我该如何使灰色部分也成为我选择的图像背景,而不必使用诸如#111、#eee等颜色。