具有透明边框图像的容器的CSS样式 [英] CSS style for container with transparent border images
问题描述
要进行页面布局,如下图所示.有三个主要组件,frameleft
,framemid
和frameright
. framemid
容纳页面内容,而其他两个组件只是其中带有透明.png
文件的边界.
Want to make a page layout such as the picture below. There are three major components, frameleft
, framemid
and frameright
. While framemid
houses the page content, the other two components are just borders with transparent .png
files in them.
问题是如何使frameleft
和frameright
与framemid
正确缩放?我在
Question is how to make frameleft
and frameright
scale properly with framemid
? I found a similar question posed earlier here, but the technique described by the answer following the accepted one (which doesn't solve the problem at all), does not apply when the images in the side components are transparent.
到目前为止,我的解决方案取决于将这些组件容纳在div中并手动设置其高度.显然这不是最佳选择,因为理想情况下,我希望整个合奏从framemid
推断出这个高度.
My solution so far relies on housing these components in a div and setting its height manually. It's obviously not optimal, since I would ideally have the entire ensemble inferring this height from framemid
.
HTML 将三个组件容纳在具有预定义高度的div中.
HTML houses the three components inside a div with predefined height.
<div style="height: 500px">
<div class="frameside frameleft"></div>
<div class="framemid"> some content </div>
<div class="frameside frameright"></div>
</div>
CSS 相对于外壳组件缩放侧面图像.
CSS scales the side images with respect to the housing component.
.frameside {
background-repeat: repeat-y;
float: left;
width: 10px;
height: 100%;
}
.frameleft { background-image: url("frame_left.png"); }
.frameright { background-image: url("frame_right.png"); }
.framemid {
width: 500px;
float: left;
}
我宁愿不必接受CSS3或HTML5解决方案/技巧,因为它必须适用于大多数浏览器.
I'd rather not have to accept a CSS3 or HTML5 solution/trick, because this has to work with most browsers.
编辑
由Warface提供,请参见 jsfiddle ,以获得可播放的版本.
See this jsfiddle, courtesy of Warface, for a play-able-version.
推荐答案
除了背景以外,是否还需要在左侧/右侧进行操作? –三十点
Does anything need to go in the left/right other than the background? – thirtydot
@thirtydot也许在 未来-是",但暂时说否".
@thirtydot Maybe in the future - "yes", but let's say "no", for now.
如果可能需要把东西放进去,这是一个选择: http://jsfiddle.net/M5UqW/ (尝试调整窗口大小)
If stuff might need to go in there, this is an option: http://jsfiddle.net/M5UqW/ (try resizing the window)
它可以在IE7 +和所有现代浏览器中使用.
It works in IE7+ and all modern browsers.
HTML:
<div class="frameouter">
<div class="frameside frameleft"></div>
<div class="framemid">content</div>
<div class="frameside frameright"></div>
</div>
CSS:
.frameouter {
border: 2px solid #444;
overflow: hidden;
position: relative
}
.frameside {
background-repeat: repeat-y;
width: 10px;
position: absolute;
top: 0;
bottom: 0
}
.frameleft {
background-image: url(http://dummyimage.com/64x64/f0f/fff);
left: 0
}
.frameright {
background-image: url(http://dummyimage.com/64x64/00f/fff);
right: 0
}
.framemid {
margin: 0 10px;
background: #ccc
}
这篇关于具有透明边框图像的容器的CSS样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!