动态地将图像添加到这个漂亮的框架 [英] Add an image dynamically to this beautiful frame
本文介绍了动态地将图像添加到这个漂亮的框架的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是纯CSS中精美的动画边框.
Here is a beautifully animated border in pure CSS.
如果我们希望将动画边框作为框架并在其中添加图像作为内容,该怎么办?
What if we want this animated borders as a frame and add an image as the content inside it.
当我添加图像时,它只是覆盖框架,但是我想将图像放置在框架内,而不是在框架上.
When I add the image it just overlays the frame, But I want to put the image inside the frame, not over it.
我已经尽力了,但是没有我的帮助,找不到解决方法.
I have tried my best but I can't find a solution without a hand.
这是我尝试过的(我需要使用javascript动态添加图片):
Here is what I've tried (I need to add the image dynamically using 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>
推荐答案
将其添加为内容背景:
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>
如果需要,您可以简化动画代码,如下所示:
If you want you can simplify the code of the animation like below:
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>
这篇关于动态地将图像添加到这个漂亮的框架的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文