Question

看到长文本没有重复背景。

红色/栗色是整体切片的图像（没有切片的中间部分），换句话说是单个图像。

假设我切片中间部分，以便随着菜单变长而重复，我怎样才能将它包含在css中？

这就是我目前包含单张图片的方式。

var objectA = new ObjectA
{
    PropertyA = 6,
    ObjectB = null
};
string serialized = JsonConvert.SerializeObject(objectA, 
                            Newtonsoft.Json.Formatting.Indented, 
                            new JsonSerializerSettings {                                
                                DefaultValueHandling = DefaultValueHandling.Ignore
                            });

预期结果如下，其中整个单词由背景图像覆盖：

如果还不清楚，请看这里：

我想做的就是，

我希望重复黑色矩形。理想情况下，当我切片时，它会出现在那里。那么如何将它用作菜单的背景（将所有图像放在一起）并重复中间（黑色矩形）重复？

Answer 1

纯CSS解决方案应该适用于所有主流浏览器，包括IE＆gt; = 9。

ul a {
  position: relative;
}

ul a:hover::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: -.8em;
  bottom: 0;
  left: -.8em;
  background-color: red;
  transform: skewX(-15deg);
}

Answer 2

您实际上不需要为此目的使用任何图像。仅使用CSS 2D transform和pseudo-elements的简单技巧就可以正常工作，并且在使用的现代浏览器中广泛支持这两个规范。

标记所需的唯一修改是将链接文本包装在另外的<span>元素中，以使z-index堆叠正常工作。

这个技巧唯一需要注意的是，当你应用一个倾斜时，偏斜的伪元素的一部分将突出于父元素的边界框。此突出取决于倾斜角度和链接的高度，但可以通过在<ul>元素上设置左右填充来确定它们不会溢出。

ul {
  background-color: #eee;
  list-style: none;
  padding: 0 1.5rem;  /* Spacing to account for skewed edges protruding out of box */
  margin: 0;
  overflow: hidden;
}
ul li a {
  color: #000;
  float: left;
  padding: .75rem 1.5rem;
  position: relative;
  transition: all .25s ease-in-out;
}
ul li a span {
  position: relative;
}
ul li a::before {
  background-color: #b13131;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: skew(-10deg);
  transition: all .25s ease-in-out;
  opacity: 0;
}
ul li a:hover {
  color: #fff;
}
ul li a:hover::before {
  opacity: 1;
}

<ul>
  <li><a href="#"><span>Item 1</span></a></li>
  <li><a href="#"><span>Item 2 that is a little bit too long</span></a></li>
  <li><a href="#"><span>Item 3</span></a></li>
</ul>

如何使切片图像的中间部分重复长菜单？

2 个答案: