#html #css #background
#HTML #css #фон
Вопрос:
я хочу иметь возможность создать что-то подобное на фотографии с помощью CSS и HTML, я сделал это, используя эту строку кода background-image: linear-gradient(180deg, rgb(32, 34, 47) 35%, rgb(29, 31, 41) 35%);
Но при этом я не могу создать эффект радиуса границы, как показано на фотографии, может кто-нибудь, пожалуйста, подсказать мне, как я могу это сделать? в настоящее время я применил этот CSS-код к body тегу.
Изображение, показывающее 2 цвета фона с эффектом нижней границы-радиуса
Комментарии:
1. это фундаментальная проблема, с которой вы столкнулись здесь. Помимо того факта, что вы не предоставили никакого соответствующего кода (особенно HTML). К радиусу границы будет применен элемент класса div, а не фоновое изображение. Поскольку фоновое изображение будет находиться внутри div или другого элемента, вы должны иметь возможность оформить его как обычно. Если вам нужно фоновое изображение с радиусом границы, оберните фоновое изображение внутри divс отрицательным z-индексом.
2. буквально нет HTML-кода, поскольку я применяю его непосредственно к тегу body. css — это body {background-image: linear-gradient(180deg, rgb(32, 34, 47) 35%, rgb(29, 31, 41) 35%); } Чего я не могу понять, так это как применить его ко всему тексту документа, поскольку яиспользование контейнера bootstrap в качестве моего первого самого DIV после тега Body
3. как я уже сказал, фундаментальная проблема. Вы не можете не применять радиус Бродера к фоновому изображению, поскольку фоновое изображение не является элементом HTML, это элемент css / style. Таким образом, вам нужно обернуть его внутри div и оформить div с радиусом границы. Вы можете использовать оболочку (div для размещения фонового изображения), придать оболочке радиус границы и вставить ее в самый фон с отрицательным значением z-индекса.
4. ааааа, понятно, я попробую это и дам вам знать, спасибо 🙂
Ответ №1:
Чтобы улучшить то, что я уже сказал вам в комментариях. Вы не можете использовать broder rdaius для элемента stylign только для элемента HTMl. Таким образом, вы должны использовать псевдо-div и переместить его на задний план с отрицательным z-индексом. Div является элементом HTML и, как таковой, также может быть оформлен таким образом.
body {
background-color: red;
}
#background {
position: fixed;
top: 0;
bottom: 60%;
left: 0;
right: 0;
border-radius: 0 0 15px 15px;
z-index: -1;
background-color: blue;
}
#content {
margin: 40px;
padding: 10px;
background-color: white;
border-radius: 5px;
} <body>
<div id="background">
<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body> Комментарии:
1. Эй, это было абсолютно блестяще, только одна вещь, использующая фиксированную позицию, сделала ее недоступной для прокрутки, поэтому я исправил это, используя position: absolute . большое вам спасибо, думаю, мне предстоит пройти долгий путь, прежде чем по-настоящему понять основы некоторых базовых вещей в CSS
2. кроме того, добавление z-индекса приводит к тому, что элементы не могут взаимодействовать, например, с кнопкой, удаление ее по-прежнему отлично работает для фона, была ли какая-то особая причина для ее добавления?
3. Z-индекс может быть описан как слои. чем выше z-индекс, тем больше он будет отображаться поверх всего остального. Особенно, если вы хотите использовать его в качестве фона для своего тела, вы все равно не захотите с ним взаимодействовать. таким образом, вы нажимаете его по слоям вниз. все вниз, чтобы оно действовало как фон для тела.
Ответ №2:
Вот что вы можете сделать: в HTML создайте элемент div и вставьте в него другой div, первый вложенный div будет вашей верхней границей, второй будет содержать текст (или любой контент):
<div class=container>
<div></div>
<div>text here</div>
</div
для CSS вам нужно применить некоторый базовый стиль (фон, размер, граница) и убедиться, что радиус границы одинаков во всех элементах div, и что первый вложенный div имеет высоту>= радиус границы :
.container {
background-color:grey;
width:250px;
height:250px;
border-radius:6px;
}
.container :first-child{
width:100%;
height:6px;
background: linear-gradient(180deg, rgb(32, 34, 47) 35%, rgb(29, 31, 41) 35%);
border-radius:6px 6px 0 0;
}
.container :last-child{
width:100%;
height:calc(100% - 6px);
border-radius:0 0 6px 6px;
display:flex;
align-items:center;
justify-content:center;
}