英文:
What should I do so that the gradient coordinates do not change when the screen size is changed?
问题
以下是您要翻译的内容：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.sky{
width: 100%;
height: 400px;
background-color: rgb(92, 217, 255);
background-image: radial-gradient(circle at 46.5% 47%, white, white 3%, rgba(255, 0, 0, 0) 4%),
radial-gradient(circle at 49% 45%, white, white 4%, rgba(255, 0, 0, 0) 5%),
radial-gradient(circle at 51% 39%, white, white 3%, rgba(255, 0, 0, 0) 4%),
radial-gradient(circle at 53.2% 46%, white, white 3%, rgba(255, 0, 0, 0) 4%),
radial-gradient(circle at 51% 48%, white, white 3%, rgba(255, 0, 0, 0) 4%) ,
radial-gradient(circle at 59% 51%, white, white 2%, rgba(255, 0, 0, 0)3%),
radial-gradient(circle at 61% 50%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 60.8% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 62.7% 47%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 62.7% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 64.7% 51%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 57% 35%, rgb(255, 145, 0), rgba(92, 217, 255, 0) 2%),
radial-gradient(circle at 57% 35%, rgb(255, 150, 0), rgba(92, 217, 255, 0) 4%),
radial-gradient(circle at 57% 35%, rgb(255, 160, 0), rgba(92, 217, 255, 0) 6%),
radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 8%),
radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 10%),
radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 12%),
radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 13%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sky"></div>
</body>
</html>
希望这对您有所帮助！
英文:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.sky{
width: 100%;
height: 400px;
background-color: rgb(92, 217, 255);
background-image: radial-gradient(circle at 46.5% 47%, white, white 3%, rgba(255, 0, 0, 0) 4%),
radial-gradient(circle at 49% 45%, white, white 4%, rgba(255, 0, 0, 0) 5%),
radial-gradient(circle at 51% 39%, white, white 3%, rgba(255, 0, 0, 0) 4%),
radial-gradient(circle at 53.2% 46%, white, white 3%, rgba(255, 0, 0, 0) 4%),
radial-gradient(circle at 51% 48%, white, white 3%, rgba(255, 0, 0, 0) 4%) ,
radial-gradient(circle at 59% 51%, white, white 2%, rgba(255, 0, 0, 0)3%),
radial-gradient(circle at 61% 50%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 60.8% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 62.7% 47%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 62.7% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 64.7% 51%, white, white 2%, rgba(255, 0, 0, 0) 3%),
radial-gradient(circle at 57% 35%, rgb(255, 145, 0), rgba(92, 217, 255, 0) 2%),
radial-gradient(circle at 57% 35%, rgb(255, 150, 0), rgba(92, 217, 255, 0) 4%),
radial-gradient(circle at 57% 35%, rgb(255, 160, 0), rgba(92, 217, 255, 0) 6%),
radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 8%),
radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 10%),
radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 12%),
radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 13%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sky"></div>
</body>
</html>
hi there
I have a problem in implementing CSS gradients!
> I want the original shape of the clouds to be preserved after resizing the page.
- It must be implemented with CSS gradients
- Only HTML and CSS should be used (preferably)
I am eager to see your solution:)
[enter image description here](https://i.stack.imgur.com/pCt35.jpg)
答案1
得分: 1
You need the aspect ratio to remain constant.
我需要保持纵横比不变。
英文:
You need the aspect ratio to remain constant.
I looked at the image you gave and the clouds seem to look OK when you had height 400px and width (gleaned from the browser's info in the image) of 1884px.
So that's the aspect-ratio that this snippet uses:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.sky {
width: 100%;
/*height: 400px;*/
aspect-ratio: 1884 / 400;
background-color: rgb(92, 217, 255);
background-image: radial-gradient(circle at 46.5% 47%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 49% 45%, white, white 4%, rgba(255, 0, 0, 0) 5%), radial-gradient(circle at 51% 39%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 53.2% 46%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 51% 48%, white, white 3%, rgba(255, 0, 0, 0) 4%), radial-gradient(circle at 59% 51%, white, white 2%, rgba(255, 0, 0, 0)3%), radial-gradient(circle at 61% 50%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 60.8% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 62.7% 47%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 62.7% 53%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 64.7% 51%, white, white 2%, rgba(255, 0, 0, 0) 3%), radial-gradient(circle at 57% 35%, rgb(255, 145, 0), rgba(92, 217, 255, 0) 2%), radial-gradient(circle at 57% 35%, rgb(255, 150, 0), rgba(92, 217, 255, 0) 4%), radial-gradient(circle at 57% 35%, rgb(255, 160, 0), rgba(92, 217, 255, 0) 6%), radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 8%), radial-gradient(circle at 57% 35%, rgb(255, 170, 0), rgba(92, 217, 255, 0) 10%), radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 12%), radial-gradient(circle at 57% 35%, rgb(255, 190, 0), rgba(92, 217, 255, 0) 13%);
}
<!-- language: lang-html -->
<div class="sky"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论