0

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

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

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

http://jsfiddle.net/p9aXg/16/

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

3 回答 3

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/

向左飘浮; 与显示：内联；与显示：内联块；与显示：表格单元格；

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

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

于 2013-08-25T13:23:55.323 回答
0

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

演示jsFiddle 

a {
    background-image: url("image.jpg");
    background-repeat:no-repeat;
    background-size:90% 70%;
    background-position:center;
    line-height: 50px;
    padding:20px;
}
于 2013-08-25T13:33:29.653 回答
0

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

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

这里有一些技巧在起作用：

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

这是效果的基础知识（请参阅 fiddle 以获取具有供应商前缀样式的版本（如果适用））：

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;
}
于 2013-08-25T14:04:37.577 回答