2

我有以下 CSS 类：

 .acceptRejectAll a, .acceptRejectAll a:visited{
        background-image: url("../images/view-patient.png");
        background-position: left top;
        background-repeat: no-repeat;
        color: #4B555C;
        float: left;
        height: 35px;
        padding-top: 12px;
        text-align: center;
        text-decoration: none;
        width: 100px;  
  }

并遵循 HTML：

<div style="float: none; display: inline-table" class="acceptRejectAll">
    <a style="display:inline-block;height:25px;" href="#" class="fontBlack" id="ctl00_ContentPlaceHolder1_btnAcceptAll">Accept All</a>
</div>

这是显示如下：

在此处输入图像描述

当我减小 css 类中的大小时：width : 85px 它显示如下：

在此处输入图像描述

它从右侧剪切图像：

我试图background-Position 在 css 类中设置：但无论是左侧还是右侧，图像都无法正确显示

什么是解决方案？

谢谢

4

3 回答 3

1

渐变和边界半径

解决这个问题的另一种方法 - 考虑到您使用的按钮样式 - 是采用渐变和边框半径路线。虽然使用 CSS 渐变的代码看起来相当混乱，但它是动态生成的，因此您不会像使用background-size.

大多数浏览器现在都很好地支持下面使用的所有内容。对于不支持渐变的任何内容，您将获得带有弯曲角的纯蓝色背景，并且几乎不再值得担心不支持边界半径。

标记：

<div class="acceptRejectAll">
  <a href="#" class="fontBlack">Accept All</a>
</div>

CSS：

.acceptRejectAll {
  display: inline-table;
  border-radius: 20px;
  text-align: center;
  padding: 10px;
  width: 100px; /* You can change the width as you like */
  background: #c3e5fe; /* Old browsers */
  background: -moz-linear-gradient(top, #c3e5fe 0%, #98d1fd 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3e5fe), color-stop(100%,#98d1fd)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* IE10+ */
  background: linear-gradient(to bottom, #c3e5fe 0%,#98d1fd 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3e5fe', endColorstr='#98d1fd',GradientType=0 );
}

.fontBlack {
  font-family: sans-serif;
  font-size: 10pt;
  color: black;
  text-decoration: none;
}

使用以下方法生成梯度：

http://www.colorzilla.com/gradient-editor/#c3e5fe+0,98d1fd+100;自定义

你最终得到：

http://jsfiddle.net/NDHtn/

或作为预览：

按钮预览

当您必须使用图像时

如果没有其他选择，只能使用图像作为按钮的背景（例如，图形太复杂而无法使用 css 效果复制），而不是使用拉伸和扭曲以适应的图像，您可以使用类似以下的方法。有很多方法可以从本质上达到相同的结果，我更喜欢让我的标记简单而我的 css 更复杂（而不是相反）。但是，为了使事情更支持更广泛的浏览器社区，您可以将标记分成三个部分，而不是使用::beforeand ::after：

标记：

<a class="button" href="#">
  <span>Round Button with lots of text and then some</span>
</a>

CSS：

.button:before {
  position: absolute;
  content: '';
  background: url('image.png') left top;
  top: 0;
  left: -50px;
  width: 50px;
  height: 99px;
}

.button:after {
  position: absolute;
  content: '';
  background: url('image.png') right top;
  top: 0;
  right: -50px;
  width: 50px;
  height: 99px;
}

.button {
  background: url('image.png') center -99px;
  height: 99px;
  margin: 0 50px;
  position: relative;
  display: inline-block;
  color: white;
  text-decoration: none;
}

.button span { display: block; padding: 35px 0px; }

image.png，使用这个原始图像和pixlr.com一起破解：

图像.png

这将给出：

http://jsfiddle.net/2K5Kg/1/

最后结果

不使用伪元素的示例标记：

<a class="button" href="#">
  <span class="before"></span>
  <span class="after"></span>
  <span>Round Button with lots of text and then some</span>
</a>

然后在 css 中只需替换.button:beforewith.button .before和相同的:after.

于 2013-10-09T07:30:22.137 回答
1

您将需要为此使用background-size。例子：

background-size: 100% 100%;

请注意，此设置可以缩放您的图像以填充父级。

于 2013-10-09T07:11:37.727 回答
1

由于图像为 100 像素（至少可见部分约为 92 像素，所以我猜大小​​为 100 像素），如果您更改按钮的大小，则需要缩放背景图像而不是更改位置。

background-size:85px 35px;
于 2013-10-09T07:12:09.260 回答