Два изображения, составляющие фон для div? - PullRequest
Новая
       5

Два изображения, составляющие фон для div?

3 голосов
/ 22 января 2011

Мне нужно создать следующее в CSS и заставить его работать на IE7 + (и Firefox, если это возможно):

image

Все сделано, кроме фона!

Цитата каждый раз отличается, поэтому фон должен автоматически регулироваться по высоте.

Также необходимо автоматически настраиваться на ширину контейнера, в котором он находится.Под этим я подразумеваю, что градиент не может растягиваться.Фон должен быть левым градиентом затухания, затем цветом фона, затем правым градиентом затухания.

Вот мой текущий код - теперь на JSFiddle :

HTML 

<div id="ehs-quotecontainer">
    <div id="ehs-bgleft">
    </div>
    <div id="ehs-bgright">
    </div>
    <div class="ehs-marks" id="ehs-marktop">                    
        “
    </div>
    <span class="ehs-quotetext">Once you believe anything, you stop thinking about it.</span>
    <div class="ehs-marks" id="ehs-markbottom">
        ”
    </div>
</div>

CSS 

#ehs-quotecontainer  {
    padding-top:8px;
    padding-bottom:8px;
    background-color:#F7F8FA;
    text-align:center;
}
#ehs-bgleft {
    background:transparent url(../images/ehsbgleft.jpg) repeat-y scroll right top;
}
#ehs-bgright {
    background:transparent url(../images/ehsbgright.jpg) repeat-y scroll right top;
}
.ehs-marks {
    height:20px;
    color:#8B8C90;
    font-size:5.0em;
}
#ehs-marktop {
    float:left;
    margin-top:-18px;
}
#ehs-markbottom {
    float:right;
    margin-top:-5px;
}
.ehs-quotetext {
    padding-left:4px;
    padding-right:4px;
    color:#000;
    font-size:1.1em;
    font-style:italic;
}

Любые идеи о том, как заставить фон работать правильно

Ответы [ 4 ]

1 голос
/ 24 января 2011

Примерно так: http://www.webdevout.net/test?012&raw

<!doctype html>
<html>
    <head>
        <title></title>
        <link href='http://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>
        <style>
body {
    background: url(http://i.stack.imgur.com/VeMeV.png) no-repeat 8px 8px;
    margin: 71px 8px 8px;
}
.quote {
    border: 1px solid #dfdfdf;
    position: relative;
    padding: 8px 35px;
}
.quote 
p {
    margin: 0;
    font: italic 12px sans-serif;
    text-align: center;
    position: relative;
    z-index: 1;
}
.quote .w, 
.quote .e {
    position: absolute;
    top: 0;
    width: 75px;
    height: 100%;
    background-image: url(http://img526.imageshack.us/img526/1796/gradientj.png);
    background-repeat: repeat-y;
}
.quote .w { left: 0; background-position: -75px 0; }
.quote .e { right: 0; background-position: 0 0; }
.quote 
span {
    color: #898a8e;
    font: 70px/70px allerta, serif;
    position: absolute;
}
.quote 
.ldquo {
    left: -35px;
    top: -15px;
}
.quote 
.rdquo {
    right: -35px;
    bottom: -42px;
}
        </style>
    </head>
    <body>
        <div style="width: 209px;">
            <div class="quote">
                <p><span class="ldquo">“</span>No task is so important or urgent that it cannot be done safely.<span class="rdquo">”</span></p>
                <div class="w"></div>
                <div class="e"></div>
            </div>
        </div>
    </body>
</html>
1 голос
/ 24 января 2011

Самый простой способ сделать это - сделать всю цитату position:relative, чтобы вы могли располагать вещи внутри нее относительно контейнера цитаты.

После этого довольно легко сделать то, что вы просите:

http://jsfiddle.net/7GEah/1/

0 голосов
/ 22 января 2011

Мне неприятно это говорить, но, поскольку вы будете использовать очень маленькое изображение, вы не захотите использовать фон и вставлять текст с фоном.

поэтому здесь вы будете:

  1. вы сохраняете фон с кавычками, как это

  2. Вставьте свой текст вс фоном, который у вас есть.И, наконец, вы можете просто дать тексту отступы.и ты готов к работе.

0 голосов
/ 22 января 2011

Не могли бы вы создать одно изображение с градиентной встречей посередине?Если это так, вы можете использовать: 

#ehs-quotecontainer {
    background: (YOUR_OUTER_EDGE_COLOR) url(../images/ehsbgMerged.jpg) repeat-y center center;
}

При условии, что вы определили края своей рамки (что, кажется, у вас есть), это всегда будет центрировать изображение градиента в вашем тексте.

IСледует добавить, что если ваше изображение слишком узкое, цвет фона будет смешиваться с краями изображения, а не растягиваться по середине, что может не соответствовать тому, что вы ищете.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...