Question

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

这就是我想要做的 enter image description here

但这就是我得到的 enter image description here

我的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;
}

这是我用过的两张图片

enter image description here

Answer 1

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

Quick jsfiddle using gradients and border-radius

.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
}

Answer 2

尝试将line-height设置为与背景高度相同（33px）。这两个div都有width: 45%; ..您想要对包含这些元素的元素的10％的其余部分做什么？

Answer 3

您可以对此代码进行大量整理并使其更加简单。例如。在这两个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>

Answer 4

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

Answer 5

试试这个：

* {
    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>

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

Answer 6

.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;
}

试试这个解决方案..... 并且请将图像修改为相同尺寸

浮动2 div和背景图像

6 个答案: