Question

我想在Html中创建的小部件中加入三个图像。我只是想在角落里给出圆形效果。这是三张图片：

alt text

我的中间一个在我的css中重复，以便它填满两个边缘之间的空间。

.widgetMainLeft
{
    background: url('/Content/Images/Title_Bar_Left.png') no-repeat;
    width:6px;
    min-height:100%;
}
.widgetMain
{
    background: url('/Content/Images/Title_Bar_Middle.png') repeat-x;
    text-align:left;
    margin-top:auto;
    min-height:100%;
}
.widgetMainRight
{
    background: url('/Content/Images/Title_Bar_Right.png') no-repeat;
    width:6px;  
    min-height:100%;
}

我将这三个类放在一个容器类中，但它只是显示中间的一个。背景图像位于小部件顶部，标题为。

<div class="widgetBody">
    <div class="widgetMainLeft" />
    <div class="widgetMain">
        <div class="widgetTitle">Messages</div>
        <div class="widgetDisplayedArea">
            <table>
            ...
            </table>
        </div>
    </div>
    <div class="widgetMainRight" />
</div>

这就是小部件现在的样子：

alt text

这就是它的外观：

alt text

如何让这种效果发生？

Answer 1

只有一个背景将被使用，所有其他课程设置将被最新的设置覆盖。

解决方案：创建三个容器而不是一个容器，每个容器都有自己的类。

Answer 2

如果放置图像会有效吗？

.widgetMainLeft
{
    background: url('/Content/Images/Title_Bar_Left.png') 0 0 no-repeat; /* 0px/0% in X dimension, 0px/0% in Y dimension */
    width:6px;
    min-height:100%;
}
.widgetMain
{
    background: url('/Content/Images/Title_Bar_Middle.png') repeat-x;
    text-align:left;
    margin-top:auto;
    min-height:100%;
}
.widgetMainRight
{
    background: url('/Content/Images/Title_Bar_Right.png') top right no-repeat;
    width:6px;  
    min-height:100%;
}

好的，我使用了以下内容：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <style>

#container  {
    margin: 1em auto;
    height: auto;
    width: 18.5em;
    font-weight: bold;
}

div.widgetBody  {
    background-color: #0f0;
}

div.widgetMainLeft
        {
    background: transparent url(img/top-left-c.png) 0 0 no-repeat;
}

div.widgetMain  {
    background: transparent url(img/bottom-left-c.png) bottom left no-repeat;
}

div.widgetTitle {
    background: transparent url(img/top-right-c.png) 100% 0 no-repeat;

    padding: 0.5em 1em 0 1em;
    border-bottom: 1px solid #000;
}

div.widgetDisplayedArea
        {
    background: transparent url(img/bottom-right-c.png) 100% 100% no-repeat;
}

ol.display  {
    display: block;
    margin: 0 auto;
    list-style-type: none;
}

ol.display li   {
    float: left;
    width: 8em;
    margin: 0.5em; background-color: rgba(220,220,220,0.5);
}

ol.display li:hover
        {
    background-color: rgba(250,250,100,0.9);
}

ol.display li img
        {
    display: inline;
    vertical-align: middle;
    margin: 0 0.4em;
}

p       {
    clear: both;
    padding: 0 1em 0.5em 1em;
    border-top: 1px solid #000;
    font-size: 80%;
    text-align: right;
}


    </style>

</head>

<body>

<div id="container">

    <div class="widgetBody">
        <div class="widgetMainLeft" />
            <div class="widgetMain">
                <div class="widgetTitle">Messages</div>

                <div class="widgetDisplayedArea">
                    <ol class="display">

                        <li><img src="img/inbox.png" alt="inbox" />inbox</li>
                        <li><img src="img/drafts.png" alt="drafts" />drafts</li>
                        <li><img src="img/outbox.png" alt="outbox" />outbox</li>
                        <li><img src="img/pending.png" alt="pending" />pending</li>

                    </ol>
                    <p><a href="#more" title="more...">more</a></p>
                </div>
            </div>

        <div class="widgetMainRight" />
    </div>

</div>


</body>

</html>

在 http://davidrhysthomas.co.uk/so/widgetcorners.html

上有一个演示

如上所述，似乎您没有正确地订购图像，背景应该放在最外面的div上，顶部图像应该放在最里面，其他的则按照适当的顺序排列。

Answer 3

尝试使用javascript为此目的，让我们说jQuery角落插件，它将在大多数浏览器中工作，甚至在IE中：）

Answer 4

这可能不是接近布局的最佳方式，但我相信您遇到的实际问题是widgetMain的重复背景图像覆盖了widgetMainLeft和widgetMainRight背景图像。只需使用以下布局的某个版本对其进行分层，然后确保widgetMain是其他两个的父级。

<div class="widgetBody">
    <div class="widgetMain">
        <div class="widgetMainLeft">
            <div class="widgetMainRight">
                <div class="widgetTitle">
                    Messages</div>
                <div class="widgetDisplayedArea">
                    <table>
                        ...
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 5

我不确定你是否可以在ccs中这样做。在我看来，你的左右div将有0高度，因为将min-height设置为100％肯定不适用于所有浏览器。

这是css设计中最常见的问题之一，等高柱......

你可以做的只是使用2个图像，一个非常宽的内容，包括右边框（只是给它一个右边的填充）和一个小边框，你需要应用于父元素（widgetBody），不是单独的widgetMainLeft div。使用适当的填充，您应该只能在css中获得效果。

Answer 6

据我所知，目前的方法存在一些问题：

min-height不适用于IE6（PNG也可能有问题）
您的图像高度是固定的，但您无法控制窗口小部件的高度，尤其是在用户调整文本大小时。当发生这种情况时，你的底部圆角不会与主体对齐。

假设您的小部件是固定宽度的，我建议：

<div class="widgetBody">
<div class="widgetMainTop />
<div class="widgetMain">
    <div class="widgetTitle">Messages</div>
    <div class="widgetDisplayedArea">
        <table>
        ...
        </table>
    </div>
</div>
<div class="widgetMainBottom" />
</div>

你的CSS会是这样的：

.widgetMainTop {
background: url('/Content/Images/Title_Bar_Top.png') center bottom no-repeat;
width: (width of widget);
height: (height of image);
}
.widgetMain {
background: #ffffff;
text-align:left;
margin-top:auto;
}
.widgetMainBottom {
background: url('/Content/Images/Title_Bar_Bottom.png') center top no-repeat;
width: (width of widget);  
height: (height of image);
}

如何加入背景图片？

6 个答案: