如何使用CSS创建灵活的背景图像

Question

我正在尝试使用扩展的背景图像设置我的H1标签，该标签用作标题的“下边框”，类似于：

这是我正在使用的小提琴：

https://jsfiddle.net/gq4b7vu4/

#logoBuild {
    width: auto;
    border: 1px solid #F500FD;
}

h1 {
    text-align: center;
    color: #958a68;
    font-family: 'Cantarell', sans-serif;
    text-transform: uppercase;
    display: table!important;
    background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
    background-repeat: repeat-x;
}


}
#titleBottom {
    border: 2px solid #0FEEF1;
}
#leftBottom {
    width: 48px;
    height: 20px;
    background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_left.png");
    background-repeat: none;
    border: 0px solid #F20004;
    float: left;
}
#rightBottom {
    width: 48px;
    height: 20px;
    background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_right.png");
    background-repeat: none;
    border: 0px solid #F20004;
    float: left;
}
#centerBottom {
    background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
    background-repeat: repeat-x;
    float: left;
    width: auto;
}
#descenderBottom {
    background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png");
    background-repeat: repeat-x;
    float: left;
    width: 1px;
    height: 27px;
}

<div id="pageHead">
  <div id="logoBuild">
    <h1>Title goes here</h1>
    <div id="titleBottom">
      <div id="leftBottom"></div>
      <div id="centerBottom"></div>
      <div id="rightBottom"></div>
    </div>
    <div style="clear:both;"></div>
    <div id="descenderBottom"></div>

  </div>

我需要根据标题的宽度展开图形，两端都是朝下，下面是下降。

我试图在H1声明之后（单独）构建边界，并且我尝试将H1置于centerBottom div之内，两者都无济于事。

Answer 1

这很有趣

https://jsfiddle.net/gq4b7vu4/3/

将您的许多样式更改为psuedo内容选择器。

#pageHead { overflow: visible; }

.logoBuild { 
  display: block; 
  width: 600px;
  margin: 0 auto;
}

h1 {
  position: relative;
  display: inline-block;
  width: auto;
  min-height: 75px;
  margin: 0 auto;
	text-align:center;
	color:#958a68;
	font-family: 'Cantarell', sans-serif;
	text-transform:uppercase;
		background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
	background-repeat: repeat-x;
  background-position: 0 48px;
  overflow: visible;
}

h1 img {
  position: absolute;
  top: 68px;
  left: 50%;
}

h1::before {
  position:absolute;
  left:-48px;
  bottom: 0;
  content: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_left.png");
}

h1::after {
 position: absolute; 
 right: -48px;
 bottom: 0;
 content: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_right.png");
}

<div id="pageHead">
  <div class="logoBuild">
    <h1>
      Title goes here
      <img src="http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png" alt="" class="bottom-center-brdr">
    </h1>
  </div>  
  <div class="logoBuild">
    <h1>
      Oh hey another cool one
      <img src="http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png" alt="" class="bottom-center-brdr">
    </h1>
  </div>    
</div>

值得注意的是，h1上的最小高度。您还需要为该标头标签添加一些底部边距。在标头标签中有一个内联图像，没有看到一种简单的方法来解决这个问题，但假设它可以通过更多的伪选择器和/或非块元素来实现。