动态添加图像到这个美丽的框架

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>