#css #background-image #pseudo-element #background-repeat
#css #background-image #псевдоэлемент #фон-повтор
Вопрос:
Я пытаюсь заставить это фоновое изображение повторно применить себя, чтобы покрыть контейнер div. Я хочу, чтобы оно оставалось того же размера, чтобы оно не увеличивалось при изменении масштаба экрана. Однако в настоящее время оно просто увеличивается и не остается прежнего размера:
.top-container {
background: background: -webkit-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: -o-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: -moz-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
position: relative;
z-index: 1;
}
.top-container:before {
content: "";
background: url("./../images/skulls.PNG") no-repeat center center fixed;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.2;
width: 100%;
height: 100%;
}
Любой совет?
РЕДАКТИРОВАТЬ: изображение уже очень маленькое, поэтому я хочу, чтобы оно оставалось того же размера и просто продолжало повторно применяться, чтобы соответствовать div. Но вместо этого оно просто увеличивает масштаб, что искажает изображение.
Комментарии:
1. Означает ли это, что вы хотите, чтобы оно было очень маленьким, чтобы оно вписывалось даже в самый маленький размер экрана? Это было бы действительно мало. Не могли бы вы объяснить немного больше, чего вы хотите.
2. ДА. Изображение уже очень маленькое, поэтому я хочу, чтобы оно оставалось того же размера и просто продолжало повторно применяться, чтобы соответствовать div. Но вместо этого оно просто увеличивает масштаб, что искажает изображение.
3. Под «повторным применением» вы подразумеваете, что оно должно повторяться? Или одно изображение должно не расти, а находиться в центре?
4. Я делаю. Но я избегал использовать это слово, потому что я тоже пытался его повторить, и это тоже не сработало!
5. Если вы хотите, чтобы оно повторялось, вы должны использовать
background-repeat: repeat, а не использоватьbackground-size: cover
Ответ №1:
Есть пара проблем, череп не повторяется, он покрывает весь div, что означает, что он выглядит «нечетким», поскольку это в основном маленькое изображение. Кроме того, имейте в виду, что IOS не справляется с исправлением фонового вложения.
Убрав повторы (их несколько) и исправленные, и просто позволив черепу отображаться в его естественном размере, мы получаем эффект, как в этом фрагменте: 
.top-container {
background: background: -webkit-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: -o-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: -moz-linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
background: linear-gradient(70deg, #790c5a 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #cc0e74 60%, #e6739f 60%);
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
position: relative;
z-index: 1;
width: 100vw;
height: 100vh;
}
.top-container:before {
content: "";
background: url("https://i.stack.imgur.com/B9QHI.png");
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.2;
width: 100%;
height: 100%;
} <div class="top-container"></div> Комментарии:
1. Вот и все — большое спасибо! Я полный новичок в CSS, и я целую вечность боролся, пытаясь понять это. С благодарностью — я отмечу это как самый полезный ответ.
2. Рад, что это сработало. Фоновые изображения обладают большой гибкостью, что может быть очень полезно.