首页盒子模型相关属性控制页面中的各个元素，制作一个背景图片是黑色圆形的页面

盒子模型相关属性控制页面中的各个元素，制作一个背景图片是黑色圆形的页面

时间: 2024-05-01 21:20:01 浏览: 114

可以使用以下 CSS 代码来制作一个背景图片是黑色圆形的页面： ```css body { background-image: url('your-image-url'); background-size: cover; background-repeat: no-repeat; background-position: center; } .circle { width: 200px; height: 200px; border-radius: 50%; background-color: black; margin: 0 auto; } ``` 在 HTML 中，可以创建一个 `<div>` 元素来作为这个黑色圆形的容器： ```html <body> <div class="circle"></div> </body> ``` 其中，`your-image-url` 是你想要设置的背景图片的 URL 地址，可以替换为你自己的图片链接。`background-size: cover` 会让图片充满整个页面，`background-repeat: no-repeat` 会禁止图片重复，`background-position: center` 会让图片在页面中居中显示。 `.circle` 类是用来控制圆形的样式的，`width` 和 `height` 控制圆形的大小，`border-radius: 50%` 让边框变成圆形，`background-color: black` 则会让圆形的背景变成黑色，`margin: 0 auto` 则会让圆形在页面中水平居中显示。

阅读全文