Question

我需要提供链接背景样式。由于宽度会有所不同，我需要使用2张图片，这就是我在链接中有跨度的原因。

我还需要将链接浮动，这意味着我必须设置段落以清除它们。

我的解决方案有效但似乎很多css并添加了额外的html元素。有更优雅的解决方案吗？

<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>

<a href="#" class="my-link"><span>   This is a link sdafsdafsdaf   </span>
</a>

<p>Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text Here is some text </p>

a {
    background: url("http://smartpeopletalkfast.co.uk/body-link-bg.jpg") 100% 50%;
    line-height: 50px;
    float: left;
}
a span {
    background: url("http://smartpeopletalkfast.co.uk/body-link-bg-2.jpg") no-repeat;
    height: 49px;
    display: block;
    padding-left: 20px;
    padding-right: 40px;
}
p {
       clear: both;
}

Answer 1

如果使用“display; inline-block”而不是浮动，则可以删除一些CSS。

请在此处查看更新的小提琴：http://jsfiddle.net/p9aXg/19/

a {
     background: url("http://smartpeopletalkfast.co.uk/body-link-bg.jpg") 100% 50%;
     display:inline-block;
}

a span {
    background: url("http://smartpeopletalkfast.co.uk/body-link-bg-2.jpg") no-repeat;    
    line-height: 50px;
    display: block;
    padding-left: 20px;
    padding-right: 40px;
}

作为一般造型说明，如果可以的话，你应该尽量避免浮动。浮动元素时，它会将其从页面流中取出。这通常会强制您浮动其他元素以使它们排成一行，就好像它们位于页面流中一样。我已经看到它滚雪球到每个元素浮动的地步，这简直是一个不必要的头痛。

使用inline-block而不是float将在大多数情况下工作。有关更多信息，请参阅以下链接： http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

http://www.vanseodesign.com/css/inline-blocks/

http://www.ternstyle.us/blog/float-vs-inline-block

Answer 2

我会使用一张背景图片并进行调整

DEMO jsFiddle

a {
    background-image: url("image.jpg");
    background-repeat:no-repeat;
    background-size:90% 70%;
    background-position:center;
    line-height: 50px;
    padding:20px;
}

Answer 3

如果您在所支持的浏览器范围内采用“渐进增强”，则可以在没有图像且没有额外元素的情况下执行此操作。这是一个例子：http://jsfiddle.net/Rt2Wa/4/

这使用CSS3技术来实现与现代浏览器中的示例一样好的结果，并在IE 7和IE中生成扁平但斜面的链接。 8.

这里有一些技巧：

display：inline-block（Ryan Henderson提到 - 非常有用！）
边界半径
背景渐变
：在伪元素之后
CSS三角形（使用边框效果创建）。

以下是效果的基础知识（请参阅适用于供应商前缀样式的版本的小提琴）：

a:link {
    background-color: #18A580;
    background: linear-gradient(to bottom, rgba(29,186,144,1) 0%,rgba(24,165,128,1) 100%);
    box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.35), inset 0px 0px 1em 0px rgba(255, 255, 255, 0.4);
    border-radius: 0.3em;
    border-top: 1px solid #67D0BF;
    border-bottom: 1px solid #18805B;
    color: #FFF;
    display: inline-block;
    padding: 0.45em 0.75em;
    text-decoration: none;
    margin-bottom: 0.8em;
}

a:link:after {
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0.25em 0 0.25em 0.5em;
    border-color: transparent transparent transparent #FFF;
    margin-left: 0.75em;
}

液体宽度解决方案与2个背景图像链接？

3 个答案: