具有透明边框图像的容器的CSS样式 [英] CSS style for container with transparent border images

查看:91
本文介绍了具有透明边框图像的容器的CSS样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

要进行页面布局,如下图所示.有三个主要组件,frameleftframemidframeright. 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.

问题是如何使frameleftframerightframemid正确缩放?我在此处中发现了一个类似的问题,但该技术由当侧面组件中的图像透明时,接受的答案(根本不能解决问题)后面的答案不适用.

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆