左右不同的背景重复x

Question

I have a header centered with a picture which right side is red and left side is blue. 我有一个以图片为中心的标题，右边是红色，左边是蓝色。 I am trying to do a background repeat-x which will repeat red color to the right and blue color to the left of the image. 我正在尝试做一个背景repeat-x，它将在图像的右边和右边重复红色。

Could someone please point me to the right direction? 有人可以指出我正确的方向吗？ Thank you, 谢谢，

** Edit: I see my questions is a bit confusing, I have 3 images. **编辑：我看到我的问题有点令人困惑，我有3张图片。 I would like one to be centered, one to repeat-x to the right and one to repeat-x to the left. 我希望一个居中，一个在右边重复x，一个在左边重复x。

Answer 1

If you need support of the oldest browser you can choose first method 如果需要最旧浏览器的支持，则可以选择第一种方法

HTML 的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 的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. Method 2.方法

You can use Multiple Bgs - but it is only supported from IE 9+ 您可以使用多个背景-但是仅IE 9+支持此功能

左右不同的背景重复x

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-05-29 10:15:59

左右不同的背景重复x

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-05-29 10:15:59

解决方案1
0 已采纳 2014-05-29 10:15:59