Question

我是CSS的新手，我需要用图案填充div或h1标签的剩余空间（它可以是图像或用CSS生成）。

这是我需要创建的效果：http://es.tinypic.com/r/20gi92/8

感谢您的帮助！

Answer 1

我会像这样使用它：http://jsfiddle.net/maximgladkov/3rNY3/

HTML

<div class="title">
    <h1>Test title</h1>
</div>

CSS

.title {
    background: url(http://ru.vectorboom.com/Tutorials/FloralPattern/final.png);
}

.title h1 {
    background: #fff;
    display: inline;
    padding: 0 10px 0 0;
}

Answer 2

我认为你的意思是保持不变，你已经有img或其他元素作为div的主要部分。所以我猜你在background添加div就是你想要的。

示例HTML：

<div class="color">
     <h1>Some Text</h1>
</div>

<div class="img">
     <h1>Some Text</h1>
</div>

用于添加颜色的CSS：

.color {
    background: yellow;
}

或图片：

.img {
    background: url('http://www.lorempixel.com/200/50');
}

<强> DEMO

Answer 3

我会在h1和伪元素中使用span。

Codepen Demo(s)

<强> HTML

<div class="wrapper"> /* not required */
   <h1 class="left"><span>Some Text</span></h1>
   <h1 class="right"><span>Some Much Longer Text</span></h1>
</div>

<强> CSS

h1 {
  overflow:hidden; /* hides all extra pixels */
  font-size:2em;
}

.right {
  text-align:right;
}

h1 > span {
  diaplay:inline-block;
  background:Navajowhite;
  position:relative;
}

h1.left > span:after {
  content: "";
  position: absolute;
  left:100%;
  top: 0;
  height: 2em; /* same as h1 or same line-height*/
  width:2000px; /* some really large number*/
  background:red;
  margin-left:0.5em; /* or remove and add padding-right to span */
}

h1.right > span:before {
  content: "";
  position: absolute;
  right:100%;
  top: 0;
  height: 2em; /* same as h1 or same line-height*/
  width:2000px; /* some really large number*/
  background:red;
  margin-right:0.5em; /* or remove and add padding-right to span */
}

使用模式填充div或h1标记的剩余空间

3 个答案:

HTML

CSS