Question

对此感到沮丧..

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

Answer 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)) );

使用颜色停止来找到正确的渐变（我选择了一个非常接近你的渐变，但我认为它只是稍微偏离）

图像拟合Div CSS

1 个答案: