css 如何用背景图像包围我的“body”元素

p5cysglq 于 2022-11-19 发布在其他

关注(0)|答案(3)|浏览(146)

我是一个初学者休闲，网页开发人员，我想围绕我的菜单与背景图像，我已经尝试自己做，但它仍然显示默认的白色背景，有人能请帮助我吗？
下面是我的CSS脚本：

body {
      background-image: url(https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.bonappetit.com%2Fstory%2Fhow-to-buy-coffee-beans&psig=AOvVaw2rGyzxjYnZTpqbQELy-_qH&ust=1668543336904000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCIj8h7q-rvsCFQAAAAAdAAAAABAD);
      font-family: sans-serif;
      padding: 20px;
    }

    .menu { 
      max-width: 500px;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      background-color: burlywood;
      padding: 10px;
    }

css

来源：https://stackoverflow.com/questions/74437663/how-to-surround-my-body-element-with-a-background-image

3条答案

按热度按时间

aor9mmx11#

这里的问题是你的链接，但是这里你有一个带有图像背景的主体，你只要改变你想要的任何图像，确保它是图像链接或图像路径

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    a
</body>

</html>

<style>
    body {
        background-image: url(https://th.bing.com/th/id/R.5e6520289b44e11a9e74363c18ce3ee1?rik=0NsMGzWCfTqnyA&riu=http%3a%2f%2fcdn.wallpapersafari.com%2f34%2f38%2ffNuD4F.jpg&ehk=rWygJFVz8poo%2buNiEqsllRqA4jP9BCE6VYuBOMM03GA%3d&risl=&pid=ImgRaw&r=0);
        font-family: sans-serif;
        padding: 20px;
        height: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        /* this is to make the image fits all the screen doesnt matter the image size, but it will cut the image
        background-size: cover; */
    }
</style>

赞(0）回复(0）举报 2022-11-19

sr4lhrrt2#

添加引号““

.menu { 
      max-width: 500px;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      background-color: burlywood;
      padding: 10px;
    }
    
    
body{
      background: url("https://img.freepik.com/free-photo/vivid-blurred-colorful-background_58702-2545.jpg?w=2000");
      font-family: sans-serif;
      padding: 20px;
    }

赞(0）回复(0）举报 2022-11-19

xnifntxz3#

您要使用的图像，将其保存在本地，然后您可以将CSS更改为'background-image：url（图像.jpg）;

赞(0）回复(0）举报 2022-11-19