请用css实现简单月亮背景图
时间: 2023-04-07 13:02:02 浏览: 144
很高兴回答你的问题!以下是一个简单的 CSS 代码,可以实现月亮背景图:
```
body {
background-image: url('https://example.com/moon.jpg');
background-repeat: no-repeat;
background-size: cover;
}
```
请将 `https://example.com/moon.jpg` 替换为你自己的图片链接。希望这个回答能够帮到你!
相关问题
请用纯css实现简单月亮背景图,不使用图片链接
我可以回答这个问题。以下是一个纯 CSS 实现简单月亮背景图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Moon Background</title>
<style>
body {
background-color: #1a1a1a;
background-image: radial-gradient(circle at 50% 100%, #f2f2f2 0%, #f2f2f2 50%, transparent 50%, transparent 100%), radial-gradient(circle at 50% 0%, #f2f2f2 0%, #f2f2f2 50%, transparent 50%, transparent 100%);
background-size: 100px 100px;
background-position: 0 0, 50px 50px;
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
```
这个示例代码使用了 CSS 的 `radial-gradient` 函数来创建两个圆形渐变,一个在页面的顶部,一个在底部,来模拟月亮的形状。然后使用 `background-image` 属性将这两个渐变叠加在一起,使用 `background-size` 和 `background-position` 属性来控制它们的位置和大小,最后使用 `background-repeat` 属性来让它们重复填充整个页面。
用hmtl、css制作一个月亮
好的,下面是一个简单的HTML和CSS代码示例,可以制作一个月亮形状的图案。
```
<!DOCTYPE html>
<html>
<head>
<title>Moon</title>
<style>
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 0 30px #f5f5f5;
}
</style>
</head>
<body>
<div class="moon"></div>
</body>
</html>
```
在上面的代码中,我们定义了一个类名为“moon”的 DIV 元素,并设置其宽度和高度为 100 像素,边框半径为 50%(即一个圆形),背景色为白色,阴影为灰色。这样就可以制作出一个简单的月亮形状了。如果需要调整月亮的大小或颜色,可以修改这些 CSS 属性的值即可。