Question

我在这里有这张图片我想作为h1 http://inauguralseason.com/wp-content/themes/twentyeleven/images/wehavelaunched.png的背景图片

我的问题是如何让左边的部分出现？这是我目前的CSS代码

.homeBottom h1 {
    background-image: url("http://inauguralseason.com/wp-content/themes/twentyeleven/images/wehavelaunched.png");
    color: #FFFFFF;
    height: 36px;
    margin-left: -50px;
    width: 589px;
}

我原以为使用margin-left:-50px会有效，但事实并非如此。

Answer 1

您指定height: 36px;，但您的图片高86像素。将高度更改为86px，您将看到整个事物。

如果36px是正确的高度，则可以改为改变背景位置。

background-position: left bottom;

Answer 2

进行这些更改

.homeBottom {
position: relative;
}

.homeBottom h1 {
position: absolute;
left: -50px;
top: /* give as per required */
}

Answer 3

您现在已经习惯了css中的after

就像这样

<强> HTML

<h1>Hello testing page </h1>

<强>的CSS

h1{
background:red;
  padding-left:20px;
  position:relative;
  height:40px;
  line-height:40px;
}
h1:after{
content:'';
  position:absolute;
  left:6px;
  top:18px;
  background:green;
  width:30px;
  height:30px;
z-index:-1;
/* Firefox */
-moz-transform: rotate(-65deg);
/* Safari */
-webkit-transform: rotate(-65deg);

/* IE */
-ms-transform: rotate(-65deg);

/* Opera */
-o-transform: rotate(-65deg);

}

demo http://tinkerbin.com/QTAO90R0

Answer 4

您还可以使用Background-size属性（CSS3）。您可以在其中设置背景图片的width和height。在您的情况下，如果您要将背景图片的height设置为与height元素的h1相同，请提供：

background-size:100% 36px;

查看小提琴here。

您可以查看此link以使此属性也适用于旧版本的IE。

CSS标题1背景图像

4 个答案: