我有一个标题，中间有一张图片，右边是红色，左边是蓝色。 我正在尝试做一个背景 repeat-x，它将在图像的右侧重复红色，在图像的左侧重复蓝色。
有人能给我指出正确的方向吗？ 谢谢，
** 编辑:我发现我的问题有点困惑，我有 3 张图片。我想要一个居中，一个在右边重复 x，一个在左边重复 x。
最佳答案
如果你需要最旧浏览器的支持你可以选择第一种方法
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/all.css"/>
<title>STACKOVERFLOW</title>
</head>
<body>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur, dolorum ex, fugit incidunt ipsa ipsam minus natus necessitatibus nisi odit officiis, perspiciatis recusandae repellendus sit totam vero voluptates. Illum temporibus vero voluptates! Accusamus atque consequatur debitis earum explicabo harum, impedit nesciunt quisquam temporibus ut! Accusamus adipisci at, aut cum dignissimos distinctio dolore ducimus eos eum, ex fuga fugiat impedit ipsam iusto magnam minima molestiae nemo nesciunt optio perspiciatis quisquam quos sapiente similique soluta sunt voluptatem, voluptates voluptatibus! A animi autem deserunt doloribus eos esse fugiat fugit ipsum labore magni maiores maxime mollitia nesciunt nostrum odio, pariatur quas quod rerum, tempore vero. Blanditiis eaque illo laudantium, natus porro quisquam repudiandae temporibus totam voluptas? Aliquid consectetur consequuntur corporis earum labore quae qui quod suscipit tenetur vel. Adipisci commodi culpa debitis doloribus dolorum nisi possimus quas quia rem repellendus, unde veritatis voluptas voluptates! Ab ad aperiam, autem delectus earum error incidunt maiores odit, omnis, quibusdam quos soluta tempore veritatis. Aperiam atque laudantium mollitia? Accusantium adipisci earum minima reprehenderit tempore! Autem, deleniti dicta ea illo maxime pariatur praesentium quam similique vel voluptate! A ab doloribus eligendi est eum inventore, iusto laboriosam minima natus nesciunt omnis porro possimus, reiciendis sint unde ut veritatis vitae, voluptatem? Ab ad amet at blanditiis corporis culpa cum cumque delectus dolorem ducimus eaque earum eius eligendi eveniet ex, facere fuga illo ipsam labore laboriosam, molestias necessitatibus numquam perspiciatis reprehenderit repudiandae suscipit, voluptatibus? Aspernatur dolor dolores earum eveniet fugiat illo ipsum magni nam nulla sapiente? Aliquam consectetur consequuntur deleniti dignissimos dolor eos est, fuga hic iste labore obcaecati perspiciatis quas recusandae sequi similique. Adipisci aliquam architecto aspernatur aut corporis deserunt dicta doloremque ducimus enim error esse exercitationem expedita facere fuga fugit hic id inventore ipsam magni maxime molestiae neque nesciunt nisi nulla odit, optio perspiciatis quisquam recusandae reprehenderit saepe sunt ut vel vitae? Delectus dolores eaque eum itaque libero molestiae, perferendis placeat quae quam quis quod sequi similique? Adipisci aperiam commodi consequuntur cumque distinctio ducimus eum ex fugiat illum ipsa iure iusto magni maxime molestias nam non, numquam pariatur placeat quaerat quasi qui quisquam ratione recusandae rem saepe sapiente sequi sint sunt vel veritatis? Accusantium aut beatae consectetur eaque fuga quia repellat repellendus. Dolores eligendi esse laudantium maiores minima possimus provident similique veritatis voluptatibus. Consequuntur delectus dolore dolorum eaque eveniet ex exercitationem expedita facilis harum illo inventore ipsum iste iure iusto libero magnam molestiae necessitatibus, nesciunt nisi nostrum numquam odio quae quia quidem reiciendis rem repudiandae sequi sit soluta ullam vel veniam voluptatem voluptatum. Alias, atque consequuntur deleniti deserunt dolorum enim esse harum hic ipsa iure maxime modi, nam nostrum optio provident quaerat quas quia tenetur totam voluptatum! Earum et nihil possimus quae? Aliquam delectus distinctio dolorum ex minus repellat sit ut. Alias at commodi dignissimos doloribus, illo illum maiores maxime molestiae numquam perspiciatis provident quibusdam, quis, totam voluptate voluptatum? Aspernatur cupiditate dolores perferendis repellendus sit. Aliquam aspernatur iure, labore maxime, natus omnis pariatur porro provident quis ratione voluptatem voluptatum. Dolorem explicabo harum minima molestias necessitatibus neque possimus quis ut.</p>
</div>
</body>
</html>
CSS
.wrapper {
width: 100%;
overflow: hidden;
position: relative;
}
.wrapper:after {
content:'';
background: #f00;
position: absolute;
top: 0;
left: 0; /*position of the first bg*/
width: 50%;
height: 100%;
z-index:-1;
}
.wrapper:before {
content:'';
background: #000;
position: absolute;
top: 0;
left: 50%; /*position where you need 2nd bg*/
width: 50%;
height: 100%;
z-index:-1;
}
<强>2。方法
您可以使用多个 Bgs - 但它仅受 IE 9+ 支持
关于html - 不同的背景 repeat-x 左右，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23930734/