我正在尝试为具有单个CSS条目的下拉菜单制作一个很酷的背景效果(具有Alpha透明度和圆角)。
我有一个顶盖(180 x 4 px),一个底盖(180 x 20px)和一个重复的中间(180 x 2px)。
这是我现有的相关CSS:
background-image: url('images/drop_top.png'), url('images/drop_bottom.png'), url('images/drop_middle.png');
background-position:left top, left bottom, 0px 10px;
background-repeat:no-repeat, no-repeat, repeat-y;
问题在于需要可扩展/可扩展的中间部分在顶部和底部下方一直重复 - 这样我的圆角现在是方形的,因为它们下面有重复的中间部分。
有没有办法防止多个背景重叠?
提前致谢!
答案 0 :(得分:8)
Background-origin and/or background-clip应该做到这一点。只需设置顶部&底部边框等于封面图形的高度,然后将drop_middle设置为background-clip:padding-box
编辑:这是一个完整的解决方案,但对于水平方向: http://jsfiddle.net/nGSba/
#box
{
display: inline-block;
margin: 1em;
padding: 9px;
border-left:9px solid transparent;
border-right:9px solid transparent;
background-image: url(http://s11.postimage.org/ufpdknvjz/left.png),
url(http://s11.postimage.org/6ng294tj3/right.png),
url(http://www.css3.info/wp-content/themes/new_css3/img/main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top;
background-origin: border-box,border-box,padding-box;
background-clip: border-box,border-box,padding-box;
}
让我陷入困境的是transparent
上的border-color
。背景总是在边框下,所以如果你的边框是实心的,背景仍然是不可见的。
答案 1 :(得分:0)
无论您使用图像的元素是什么,请尝试执行以下操作(为了便于说明,我会假设div
):
div {
background-image: url('images/drop_top.png'), url('images/drop_bottom.png');
background-position:left top, left bottom;
background-repeat:no-repeat, no-repeat;
position: relative;
}
div:after {
position: absolute;
top: 10px ; /* whatever your top image height is */
bottom: 10px; /* whatever your bottom image height is */
left: 0;
right: 0;
z-index: -1;
background-image: url('images/drop_middle.png');
background-position: left top;
background-repeat: repeat-y;
}