Question

我正在尝试制作网站的背景问题，背景目前是黑色，但我想将其更改为图像背景。我尝试将背景元素放在body标签中，但它搞砸了网站的格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Some Website</title>
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<style>
    body {margin:0;
    background-color: black}
    .socialmedia {
        position:fixed;
        right:150px;
        top:35px;
        transform:translate(0,-50%);
        display: flex; /* add this */
        align-items: center; /* add this */
    }
    .preorder button {
        background-color: white;
        border: 0;
        height: 35px;
        width: 110px;
        margin-left: 35px;
    }
    .footer {
        display: flex;
        align-items: center;
        width: 100%;
        height: 90px;
        margin-top: 319px;
        background-color: black;
    }
    </style>

<body>
    <div class = "Coming Soon" style = "background-color: black; color: white;" >
        <a href="file:///C:/Noah's%20stuff/ComingSoon.html"><h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Lunation Boards</h1></a>
        <style>
            a{text-decoration: none;
            color: white;}
        </style>
        <div class="socialmedia">
            <a class = "Facebook">
                <img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
            </a>
            <a class = "Instagram">
                <img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px">
            </a>
            <a class = "Youtube">
                <img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
            </a>

        </div>
        <p style = "font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Website currently under development. Kickstarter launching soon!</p>
        <div class = "footer" style = "background-color: black; color: gray;">
            <a href="file:///C:/Noah's%20stuff/ComingSoon.html"><img src="Logo.PNG" style = "margin-left: 40%; width: 130px; height: 80px"></a>
            <p style = "font-family: Verdana; font-size: small; padding-left: 40%;">2017 Some Company LLC | City State somewebsite.com All Right Reserved.</p>
        </div>
    </div>


</body>
</html>

Answer 1

您在正文和<div class = "Coming Soon"内设置了背景颜色。我只是删除了div中的background属性，并将background-color更改为body中的background-image。我用的图像似乎很好。这是一支带有http://codepen.io/bungeedesign/pen/VpjQyg

变化的笔

要使用您的图片，只需在此处更改图片路径/网址background-image: url("http://www.hbc333.com/data/out/80/47919123-flat-wallpaper.png");

试图将网站的背景从黑色变为图像

1 个答案: