Q

浮动2 div和背景图像

2013-05-17 47 views 0 likes

0

我想浮动两个div并设置背景图像给他们。但我无法得到的期望的外观。浮动2 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; 
}

这是两个IMAG ES我用

enter image description here

2013-05-17 MJM

+0

怎么样'背景：NO-重复网址（../ images/Outstanding％20button.png）8px 0;'并且删除所有其他背景的实例 – Morpheus

+0

不会影响:( – MJM

+0

您可以使用您的图像进行代码的实时演示... 。那会我们更容易理清你的问题。 –

A

回答

2

你可以完全抛弃的图像，并使用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 
}

2013-05-17 11:28:24

0

橙色DIV是简单地渴望你的橙色BG。尝试为.orange_bk添加最大宽度！你还应该设置ID为显示：块并添加一个填充顶部，以便文本垂直居中

2013-05-17 11:05:52 user1511417

1

尝试将线条高度设置为与背景高度（33px）相同。此外这两个divs都有width: 45%; ..你想用剩下的10％来做什么，包含这些元素的元素有？

2013-05-17 11:06:25 Teshte

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-17 11:07:37

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-17 11:10:44 jons

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-17 11:45:44

相关问题