1

对这个感到沮丧..

http://www.gd-gaming.com/wordpress/player-news/

如果你看标题区域，我把它分成两个 div，一个包含球员姓名，另一个包含与球员团队相关的 img。

图片必须为 325 像素，否则无法正确显示首页 - 请参见此处 (www.gd-gaming.com/wordpress)

我试过使用渐变，溢出..没有什么能让渐变一直延伸到另一个 div ......

注意：球队标志必须保持在右侧，否则会像其他标志一样在中间。

#player {
    height:40px;
    width: 300px;
    float: left;
    border-top: 1px solid #6B6B6B;  
    border-bottom: 1px solid #6B6B6B;
}

#player h2 {
    font-size: 15px;
    margin: 0;
    padding-left: 8px;
    padding-top: 10px;
    color: #fff;
    font-weight: 100;
}

.jacksonville {
    float:right;
    height:40px;
    background-image: url(images/teams/jack.png); /* fallback */
    background-image: url(images/teams/jack.png), -webkit-gradient(linear, right top,   right bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
    background-image: url(images/teams/jack.png), -webkit-linear-gradient(top, #0E7D93, #0B515E); /* Chrome 10+, Saf5.1+ */
    background-image: url(images/teams/jack.png), -moz-linear-gradient(top, #0E7D93, #0B515E); /* FF3.6+ */
    background-image: url(images/teams/jack.png), -ms-linear-gradient(top, #0E7D93, #0B515E); /* IE10 */
    background-image: url(images/teams/jack.png), -o-linear-gradient(top, #0E7D93, #0B515E); /* Opera 11.10+ */
    background-image: url(images/teams/jack.png),  linear-gradient(top, #0E7D93, #0B515E); /* W3C */
    background-repeat: no-repeat;
    width: 325px;
}
4

1 回答 1

1

您将需要样式化playertitle div. 我建议你将它从一个 ID 更改为一个类，这样它就会是这样的：<div class="playertitle">...</div>而不是<div id="playertitle">...</div>. （ID 只能分配给每个页面的一个元素，类可以分配给每个页面的多个元素。）

然后，在您的 CSS.playertitle类中使用以下代码：

background-image: -webkit-gradient(
    linear, left bottom, left top,
    color-stop(0.15, rgb(11,82,94)),
    color-stop(1, rgb(14,125,147)) );

玩转色标以找到正确的渐变（我选择了一个非常接近你的渐变，但我认为它只是有点偏离）

于 2013-06-29T03:00:07.217 回答