Question

我有一个标题，图片右侧为红色，左侧为蓝色。我正在尝试做一个背景repeat-x，它会向右重复红色，在图像左边重复蓝色。

有人可以指出我正确的方向吗？谢谢，

**编辑：我看到我的问题有点令人困惑，我有3张图片。我想要一个居中，一个重复-x到右边，一个重复-x到左边。

Answer 1

如果您需要支持最早的浏览器，可以选择第一种方法

<强> 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。方法

您可以使用Multiple Bgs - 但仅支持IE 9 +

左右不同的背景repeat-x

1 个答案: