0

我正在尝试浮动两个 div 并为它们设置背景图像。但我无法得到想要的外观。

这就是我想做的 在此处输入图像描述

但这就是我得到的 在此处输入图像描述

我的 HTML

<div class="orange_bk">Outstanding</div> <div class="black_bk">Play</div>

css

.orange_bk{
    float: left;
background: url(../images/Outstanding%20button.png);
background-position: 8px -10px;
width: 45%;
height: 33px;
background-repeat: no-repeat;
line-height: 23px;
text-align: center;
font-size: 15px;
}

.black_bk{
    float: right;
    background: url(../images/Play%20Button.png);
background-position: 8px -10px;
width: 45%;
height: 33px;
background-repeat: no-repeat;
line-height: 23px;
text-align: center;
font-size: 15px;
}

这是我使用的两张图片

在此处输入图像描述 在此处输入图像描述

4

6 回答 6

2

您可以完全放弃图像并使用background: #fb892b;橙色并在顶部设置渐变。也border-radius用于圆角

使用渐变和边框半径的快速 jsfiddle

.orange_bk, .black_bk {
    color:#fff;
    float: left;
    background: #fb892b;
    width: 50%;
    height: 33px;
    line-height: 2em;
    text-align: center;
    font-size: 15px;
    border-radius:.25em 0 0 .25em;
    padding:.25em 0;
    font-weight:bold;
    font-family: sans-serif;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0.00)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.00));
}
.black_bk {
    float: right;
    background: #000;
    border-radius: 0 .25em .25em 0
}
于 2013-05-17T11:28:24.907 回答
1

尝试将 line-height 设置为与背景的高度 (33px) 相同。两个 div 也都有width: 45%;..你想用包含这些元素的元素的剩余 10% 做什么？

于 2013-05-17T11:06:25.450 回答
1

您可以大量整理此代码并使其更简单。例如，在这两个 div 周围包裹一个元素并执行以下操作：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.wrap {
    width: 598px; 
    overflow: hidden;
}

.wrap div {
    width: 50%;
    line-height: 58px;
    text-align: center;
    font-size: 15px;
}

.orange_bk {
    float: left;
    background: url(../images/Outstanding%20button.png) no-repeat 0 0;
}

.black_bk{
    float: right;
    background: url(../images/Play%20Button.png) no-repeat 0 0;
}

</style>

</head>
<body>
<div class="wrap">
<div class="orange_bk">Outstanding</div> <div class="black_bk">Play</div>
</div>
</body>
</html>
于 2013-05-17T11:07:37.597 回答
0

橙色 div 只是为了渴望你的橙色 BG。尝试为 .orange_bk 添加最大宽度！您还应该将 id 设置为 display:block 并添加一个 padding-top，以便文本垂直居中

于 2013-05-17T11:05:52.080 回答
0

试试这个：

* {
    margin: 0;
    padding: 0; 
}

body {
    color: white;   
}

.orange_bk{
    float: left;
background: url(r55XB.png);
width: 50%;
height: 26px;
padding-top: 7px;
background-repeat: no-repeat;
text-align: center;
font-size: 15px;
}

.black_bk{
    float: right;
    background: url(tRfQv.png);
width: 50%;
height: 26px;
padding-top: 7px;

background-repeat: no-repeat;
text-align: center;
font-size: 15px;
}</style>

使用具有非重复背景的百分比值会使窗口大小正常时看起来很尴尬，因此您可能需要更改与此相关的内容。

于 2013-05-17T11:10:44.543 回答
0 
.main{width:400px;}

.orange_bk{
float: left;
background: url(r55XB.png);
/*background-position: 8px -10px;*/
width: 45%;
height: 58px;
background-repeat: no-repeat;
line-height: 58px;
text-align: center;
font-size: 15px;
text-shadow: 2px 2px 2px #000;
color:#FFF;
}

.black_bk{
float: left;
background: url(tRfQv.png);
background-position: -119px 0px;
width: 45%;
height: 58px;
background-repeat: no-repeat;
line-height: 58px;
text-align: center;
font-size: 15px;
text-shadow: 2px 2px 2px #000;
color:#FFF;
}

试试这个解决方案.....也请把图片修改成相同的大小

于 2013-05-17T11:45:44.363 回答