浮动2 div和背景图像
浮动2 div和背景图像
提问于 2013-05-17 18:42:07
我正在尝试浮动两个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;
}这是我使用的两张图片
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-05-17 19:28:25
你可以完全抛弃图像，使用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
}Stack Overflow用户
发布于 2013-05-17 19:06:25
尝试将line-height设置为与背景高度(33px)相同。另外，这两个div都有width: 45%; ..what，你想用包含这些元素的元素剩余的10%做什么吗？
Stack Overflow用户
发布于 2013-05-17 19:07:38
您可以对此代码进行大量整理，使其更加简单。例如，在这两个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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16607056
复制相关文章
相似问题
腾讯云开发者
