Как выровнять фоновое изображение с заполнением?

У меня есть <div> с левым выровненным фоновым изображением и некоторым текстом.Как выровнять фоновое изображение с заполнением?

Мне нужно, чтобы div (или внутренний div) имел некоторое дополнение, чтобы текст начинался рядом с фоновым изображением, а не на нем. Есть ли способ сделать это с помощью CSS?

Вот fiddle и CSS:

.mydiv { 
    background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312'); 
    background-position: left bottom; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-color: #fff; 
    width: 500px; 
    height: 700px; 
}

источник

2016-04-25 MeCe

Что вы имеете в виду под «Текст будет рядом с фоновым изображением, не на нем "? – j08691

Я предполагаю, что вы не хотите, чтобы текст был на изображении, а не под изображением. Я прав? –

Если вы не хотите, чтобы текст был включен в изображение, почему изображение является фоном? –

Flexbox и псевдо-элемент может это сделать ... предполагая, у меня есть свое намерение прямо.

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

В основном, внутренний DIV составляет 100% высот родительского элемента но в любом пространстве после текст взят псевдоэлементом, который имеет изображение в качестве фона.

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.mydiv { 
 
    background-repeat: no-repeat; 
 
    background-color: white; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
.mydiv div { 
 
    display: flex; 
 
    height: 100%; 
 
} 
 
.mydiv div:after { 
 
    content: ''; 
 
    background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312'); 
 
    background-position: left bottom; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    flex: 1; 
 
}

<div class="mydiv"> 
 
    <div>My Text here</div> 
 
</div>

ПЕРЕСМОТР/АЛЬТЕРНАТИВНЫЕ после комментировали требования обновленный

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

Вы должны были бы изменить структуру и поместить встроенное изображение

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.mydiv { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display: flex; 
 
} 
 
.imgdiv { 
 
    height: 100%; 
 
} 
 
.imgdiv img { 
 
    max-height: 100vh; 
 
    max-width: 100%; 
 
} 
 
.textdiv { 
 
    flex: 1 0 auto; 
 
}

<div class="mydiv"> 
 
    <div class="imgdiv"> 
 
    <img src="http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312" alt=""> 
 
    </div> 
 
    <div class="textdiv">My Text here</div> 
 
</div>

JSFiddle Demo

источник

2016-04-25 14:57:39

Основываясь на разъяснении, предоставленном @MeCe в комментариях к вопросу, я думаю, что использование ':: before' вместо' :: after' здесь является искомым решением. – Shaggy

Нет, к сожалению, нет. Псевдоэлемент должен иметь возможность вычислять ширину, и это невозможно сделать с помощью flexbox, поскольку текстовый div просто займет все пространство, не оставляя ни одного для псевдоэлемента. –

Думаю, у меня появилась идея. Я получаю то, что я хочу, на самом деле невозможно с помощью только CSS. Я думаю, что могу работать с внутренним образом, может быть, это параллакс или что-то в этом роде. Спасибо. – MeCe

Нет необходимости в 2 DIV, вы можете достичь всего лишь один очень простой способ Попробуйте этот код:

.mydiv { 
    background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312'); 
    background-position: 0 0; 
    background-size: 250px auto; 
    background-repeat: no-repeat; 
    background-color: #fff; 
    width: 500px; 
    height: 700px; 
    padding-left: 255px; 
    text-align: left; 
}

источник

2016-04-25 14:42:34

Благодарим вас за идею. Я не думал попробовать его с размером фона пикселя. – MeCe

Если вы хотите, чтобы текст не отображался на фоновом изображении, но ниже его, у меня есть два решения:

Первый:

Используйте отдельный DIV для фонового изображения, как

.mydiv { 
 
    background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312'); 
 
    background-position: left bottom; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-color: #fff; 
 
    width: 100vw; 
 
    height: 100vh; 
 
}

<div class="mydiv"></div><div>My Text here</div>

Второго:

Примените следующий CSS к DIV, содержащему текст.

.mydiv { 
 
    background-image: url('http://vignette3.wikia.nocookie.net/starwars/images/d/d6/Human_NEGAS.jpg/revision/latest?cb=20090709062312'); 
 
    background-position: left bottom; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-color: #fff; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
#innerText { 
 
    padding-top: 105vh; 
 
}

<div class="mydiv"><div id="innerText">My Text here</div></div>

источник

2016-04-25 14:48:11

Как выровнять фоновое изображение с заполнением?

ответ

Смежные вопросы