動態添加圖像到這個美麗的框架

Question

這是純 CSS 中精美的動畫邊框。

如果我們想要這個動畫邊框作為一個框架並添加一個圖像作為其中的內容怎么辦。

當我添加圖像時，它只是覆蓋了框架，但我想將圖像放在框架內，而不是放在框架上。

我已經盡力了，但沒有人手我找不到解決辦法。

這是我嘗試過的（我需要使用 javascript 動態添加圖像）：

 //addimage(); // uncomment this to add the image to the frame function addimage(){ let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg'; let image = document.createElement('img'); image.setAttribute("id", "shot"); var node = document.getElementsByClassName('content'); node[0].appendChild(image); image.src = `${pictureSource}`; let shot = document.getElementById("shot"); }

 html, body, .box .content { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; } .box { width: 300px; height: 300px; box-sizing: border-box; padding: 15px; position: relative; overflow: hidden; } .box::before { content: ''; position: absolute; width: 150%; height: 150%; background: repeating-linear-gradient( white 0%, white 7.5px, hotpink 7.5px, hotpink 15px, white 15px, white 22.5px, hotpink 22.5px, hotpink 30px); transform: translateX(-20%) translateY(-20%) rotate(-45deg); animation: animate 20s linear infinite; } .box .content { position: relative; background-color: white; flex-direction: column; box-sizing: border-box; padding: 30px; text-align: center; font-family: sans-serif; z-index: 2; } .box, .box .content { box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1); border-radius: 10px; } .box .content h2 { color: deeppink; } .box .content p { color: dimgray; } @keyframes animate { from { background-position: 0; } to { background-position: 0 450px; } }

 <div class="box"> <div class="content"> </div> </div>

Answer 1

將其添加為內容背景：

 addimage(); // uncomment this to add the image to the frame function addimage(){ let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg'; var node = document.getElementsByClassName('content'); node[0].style.background='url("'+pictureSource+'") center/cover' }

 html, body, .box .content { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; } .box { width: 300px; height: 300px; box-sizing: border-box; padding: 15px; position: relative; overflow: hidden; } .box::before { content: ''; position: absolute; width: 150%; height: 150%; background: repeating-linear-gradient( white 0%, white 7.5px, hotpink 7.5px, hotpink 15px, white 15px, white 22.5px, hotpink 22.5px, hotpink 30px); transform: translateX(-20%) translateY(-20%) rotate(-45deg); animation: animate 20s linear infinite; } .box .content { position: relative; background-color: white; flex-direction: column; box-sizing: border-box; padding: 30px; text-align: center; font-family: sans-serif; z-index: 2; } .box, .box .content { box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1); border-radius: 10px; } .box .content h2 { color: deeppink; } .box .content p { color: dimgray; } @keyframes animate { from { background-position: 0; } to { background-position: 0 450px; } }

 <div class="box"> <div class="content"> </div> </div>

如果你願意，你可以簡化動畫的代碼，如下所示：

 addimage(); // uncomment this to add the image to the frame function addimage() { let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg'; var node = document.getElementsByClassName('content'); node[0].style.background = 'url("' + pictureSource + '") center/cover' }

 body { height: 100vh; margin:0; display: flex; align-items: center; justify-content: center; background-color: black; } .box { border-radius: 10px; background: repeating-linear-gradient(-45deg, white 0 7.5px, hotpink 0 15px) 0 0/21.21px 21.21px; /* 21.21px = sqrt(2) * 15px */ animation: animate 1s linear infinite; } .box .content { width: 300px; height: 300px; border-radius: 10px; box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1); margin:15px; } @keyframes animate { to { background-position: 21.21px 21.21px; } }

 <div class="box"> <div class="content"> </div> </div>

Answer 2

另一種選擇：將.content設置為overflow: hidden

並幫助保留框架位於圖像頂部的錯覺，以及一個帶有插入陰影的:after偽元素到.box 。

 addimage(); // uncomment this to add the image to the frame function addimage(){ let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg'; let image = document.createElement('img'); image.setAttribute("id", "shot"); var node = document.getElementsByClassName('content'); node[0].appendChild(image); image.src = `${pictureSource}`; let shot = document.getElementById("shot"); }

 html, body, .box .content { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; } .box { width: 300px; height: 300px; box-sizing: border-box; padding: 15px; position: relative; overflow: hidden; } .box::before { content: ''; position: absolute; width: 150%; height: 150%; background: repeating-linear-gradient( white 0%, white 7.5px, hotpink 7.5px, hotpink 15px, white 15px, white 22.5px, hotpink 22.5px, hotpink 30px); transform: translateX(-20%) translateY(-20%) rotate(-45deg); animation: animate 20s linear infinite; } .box:after { content: ''; position: absolute; z-index: 3; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); } .box .content { overflow: hidden; position: relative; background-color: white; flex-direction: column; box-sizing: border-box; padding: 30px; text-align: center; font-family: sans-serif; z-index: 2; } .box, .box .content { box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1); border-radius: 10px; } .box .content h2 { color: deeppink; } .box .content p { color: dimgray; } @keyframes animate { from { background-position: 0; } to { background-position: 0 450px; } }

 <div class="box"> <div class="content"> </div> </div>