css - CSS 标题 1 背景图片

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

我原以为 usemargin-left:-50px会起作用，但事实并非如此。

Answer 1

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

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

background-position: left bottom;

Answer 2

进行这些更改

.homeBottom {
position: relative;
}

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

Answer 3

嗨，现在习惯after在你的 CSS 中

像这样

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

}

演示http://tinkerbin.com/QTAO90R0

Answer 4

您还可以使用背景大小属性 (CSS3)。您可以在其中设置背景图像的width和height。在您的情况下，如果要将背景图像的 设置为与元素height的相同，请给出：heighth1

background-size:100% 36px;

看这里的小提琴。

您也可以查看此链接以使此属性在旧版本的 IE 中也能正常工作。