Css 如何在實際圖像上轉換背景圖像？
[英]Css How to transition a background image over an actual image?
問題描述
我有一張圖像，當用戶將鼠標懸停在圖像上時，我想從中心顯示窗簾效果。 在他們 hover 之后，我想在新背景上顯示文本。
正如您從片段中看到的那樣，第一個框做了我所期望的減去文本。 第二個盒子有實際圖像，但 animation 不起作用
.box { width: 100px; height: 100px; display:inline-block; transition: 1s; }.to-center{ background: linear-gradient(black,black) no-repeat, red; background-size: 100% 100%; background-position:center; }.to-center:hover { background-size: 0% 100%; /* Or 100% 0% */ }.from-center{ background: linear-gradient(red,red) no-repeat, black; background-size: 0% 100%; /* Or 100% 0% */ background-position:center; }.from-center:hover { background-size: 100% 100%; }.from-center:hover:after{ bottom: 0; left: 15px; content:"Hi I am After"; }
<div class="box from-center"></div> <br/> <div class="box from-center"> <img src="https://i2.wp.com/www.techjunkie.com/wp-content/uploads/2019/07/Compressing-Options.jpg"> </div>
3 個解決方案
解決方案1
1 已采納 2020-04-15 13:34:08
在這種情況下，在兩個元素之間拆分圖像，我使用了偽元素並具有相同的效果。
[box] { width: 200px; height: 200px; position: relative; overflow: hidden; display: inline-flex; justify-content: center; align-items: center; } [box]:before, [box]:after { position: absolute; content: ''; width: 50%; height: 100%; transition: transform 1s; background-image: url(https://i.picsum.photos/id/163/200/200.jpg); background-size: 200% 100%; background-repeat: no-repeat; } [box]:before { left: 0; background-position: left 0 center; } [box]:after { right: 0; background-position: right 0 center; } [box]:hover:after { transform: translateX(100%) } [box]:hover:before { transform: translateX(-100%) }
<div box>Some text to show</div>
編輯：為了使這個動態我們可以利用 css 變量。
[box] { width: 200px; height: 200px; position: relative; overflow: hidden; display: inline-flex; justify-content: center; align-items: center; } [box]:before, [box]:after { position: absolute; content: ''; width: 50%; height: 100%; transition: transform 1s; background-image: var(--data-img); background-size: 200% 100%; background-repeat: no-repeat; } [box]:before { left: 0; background-position: left 0 center; } [box]:after { right: 0; background-position: right 0 center; } [box]:hover:after { transform: translateX(100%) } [box]:hover:before { transform: translateX(-100%) }
<div box style="--data-img:url(https://i.picsum.photos/id/163/200/200.jpg)">Some text to show</div> <div box style="--data-img:url(https://i.picsum.photos/id/164/200/200.jpg)">Some text to show</div> <div box style="--data-img:url(https://i.picsum.photos/id/165/200/200.jpg)">Some text to show</div> <div box style="--data-img:url(https://i.picsum.photos/id/166/200/200.jpg)">Some text to show</div>
解決方案2
0 2020-04-15 13:06:24
我想我會使用偽元素來創建封面，例如：
.reveal { position: relative; display: inline-block; border: 1px solid; }.reveal img { display: block; }.reveal::before, .reveal::after { content: ''; position: absolute; top: 0; width: 50%; height: 100%; background: black; -webkit-transition: 1s; transition: 1s; }.reveal::before { -webkit-transform-origin: left center; transform-origin: left center; left: 0; }.reveal::after { -webkit-transform-origin: right center; transform-origin: right center; right: 0; }.reveal:hover::before, .reveal:hover::after { -webkit-transform: scaleX(0); transform: scaleX(0); }.reveal p { -webkit-transition: 1s 1s; transition: 1s 1s; opacity: 0; }.reveal:hover p { opacity: 1; }
<div class="reveal"> <p>SOME TEXT</p> <img src="https://i2.wp.com/www.techjunkie.com/wp-content/uploads/2019/07/Compressing-Options.jpg" /> </div>
解決方案3
-2 2020-04-15 13:13:20
您可以使用 Jquery、一點自定義 JS 和一點 CSS 來獲得這個基本功能。
這里是以基本的 HTML 作為起點。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My first website</title>
<link rel="stylesheet" href="css-01/css/styles.css">
</head>
<body>
<input id="btn01" type="button" value="Animate" onclick="animation(); hideText();" />
<h1>Here is some heading to animate when you press the button.</h1>
<img src="01.jpg" id="image01" alt="Smiley face" height="750" width="500">
<img src="02.jpg" id="image02" alt="Smiley face" height="750" width="500">
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="custom.js"></script>
</html>
你有兩個圖像，你有你的 jquery，你將用於 animation 效果，你有一個按鈕，按下時會調用 function。
您當然可以為此效果使用各種事件觸發器，hover 是另一種選擇，讓 go 與點擊事件處理程序
然后，在您的自定義 css 中，您必須將第一個圖像的 position 屬性設為絕對值。 這具有將其從文檔 Model 中刪除的效果。
然后將第二個圖像的 position 屬性設置為相對。 然后，您還必須為第一個圖像提供小於第二個圖像的 z-index。
#image01 {
position: absolute;
z-index: -1
}
#image02 {
position: relative;
z-index: 1
}
然后，您只需創建 function 以在單擊按鈕時調用（來自您的自定義 JS 文件）。
function animation() {
$("#image02").fadeToggle("slow");
}
function hideText() {
$("h1").toggle("slow");
}
平滑的 CSS 背景圖像過渡
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.