Как отобразить изображение (которое прозрачно) поверх другого изображения с помощью CSS
I необходимо для отображения заставки в браузере. Заставка должна состоять из двух частей: статического и движущегося изображения. На движущемся изображении есть несколько зданий, а в оставшейся области (262 x 192), где нет зданий, оно прозрачно. Код приведен ниже.
<!DOCTYPE html>
<html>
<head>
<title>Moving Screen Saver</title>
<style>
html, body {
position: relative;
height: 100%;
width: 100%
}
#bgimg {
background-image: url("background/background2.jpeg");
position: absolute;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
#bdgimg {
background-image: url("buildings/bdg2.jpeg");
opacity: 0.5;
position: absolute;
background-repeat: no-repeat;
bottom: 0px;
left : 0px;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id = "bgimg">
</div>
<div id = "bdgimg">
</div>
</body>
</html>
Отображается второе изображение. Но вместо прозрачной области отображается какой-то цвет, а не прозрачный. Я пробовал с разными значениями непрозрачности, но без толку. Может ли кто-нибудь помочь мне решить эту проблему.
Спасибо @MichaelElliott. Я пробовал использовать разные изображения, но ни одно изображение не работает. Не уверен, почему он не отображается прозрачным. Я скопировал и вставил весь код, который пытался.
Можете ли вы сделать снимок экрана и отредактировать свой комментарий, чтобы он содержал его?
Спасибо @MichaelElliott. Я добавил рассматриваемый скриншот.
Ответы 1
Надеюсь, это поможет вам, добавьте свойство ниже в свой css
#bdgimg {
background-color:transparent;
}
Поскольку он также отлично работает и без этого, с вашим изображением могут быть другие проблемы.
РЕДАКТИРОВАТЬ Вот демо.
<!DOCTYPE html>
<html>
<head>
<title>Moving Screen Saver</title>
<style>
html, body {
position: relative;
height: 100%;
width: 100%
}
#bgimg {
background-image: url("https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg");
position: absolute;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
#bdgimg {
background-image: url("https://cdn.pixabay.com/photo/2017/12/05/09/12/business-2998905_960_720.png");
opacity: 1;
position: absolute;
background-repeat: no-repeat;
bottom: 0px;
left : 0px;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id = "bgimg">
</div>
<div id = "bdgimg">
</div>
</body>
</html>Спасибо @Ash. Я пробовал использовать разные изображения, но ни одно изображение не работает. Не уверен, почему он не отображается прозрачным. Я скопировал и вставил весь код, который пытался.
Будет полезно, если вы сможете поделиться демонстрацией своей страницы, если это возможно.
Я добавил скриншот в свой вопрос.
Думаю, проблема в том, что вы не используете файл изображения .png. Пожалуйста, конвертируйте его в формат png.
Я использую файл .jpeg. Разве мы не можем использовать файлы jpeg?
jpg не поддерживает прозрачность.
Точно сказать не могу. Потому что я тоже пробовал с .png. Но не работает.
Я предлагаю вам использовать Photoshop, чтобы извлечь изображение здания из файла .jpg, а затем сохранить его как файл .png. Преобразование напрямую в png вам не поможет.
Я пробовал совершенно разные файлы .png. Я не конвертировал файлы .jpeg в файлы .png.
Я попробовал с другим изображением png и начал работать. Возможно, файлы, которые я пробовал, неправильные.
Когда я использую ваш код с изображениями-заполнителями, он работает должным образом. Я предполагаю, что ваше изображение имеет неожиданный цвет или что-то еще происходит за пределами предоставленной информации.