Linux Nginx HTML+CSS


#div1 {
    background-image: url(./form_bg.jpg);
    background-position: left top;
    width: 1431px;
    height: 717px;
    background-repeat: no-repeat;
    position: relative;
}
 
body,
form,
h1,
p,
div {
    margin: 0px;
    padding: 0px;
}
 
body {
    font-family: 微软雅黑;
    font-size: 12px;
}
 
form {
    width: 600px;
    height: 400px;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    position: absolute;
    left: 48%;
    top: 10%;
}
 
h2 {
    text-align: center;
    ;
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: -20px;
    margin-right: 150px;
    font-size: 40px;
}
 
p {
    margin-top: 20px;
}
 
span {
    width: 75px;
    display: inline-block;
    padding-right: 10px;
    text-align: right;
}
 
.input {
    width: 200px;
    height: 18px;
    border: 1px solid #38a1bf;
    padding: 2px;
}
 
#input {
    width: 100px;
    height: 24px;
}
 
.buttorn {
    width: 100px;
    height: 30px;
    background-color: #93b518;
    margin-top: 20px;
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/828548293686145.png "#left")

    margin-left: 75px;
    border-radius: 3px;
    font-size: 18px;
    font-family: 微软雅黑;
    color: white;
}
 
span {
    font-size: 20px;
}

这个是CSS代码，图片路径在./form_bg.jpg
图片路径也没问题呀，但是我的网站访问，没有图片显示

img

先检查文件权限：你需要检查文件/文件夹的权限。如果您使用的是Linux服务器，则需要使用以下命令更改文件权限：
sudo chmod 644 form_bg.jpg。权限有了就看缓存，需要清除浏览器缓存。在您的浏览器中按Ctrl + F5可以强制刷新网页并清除缓存。
上面都没问题就检查Nginx配置，如果您的Nginx配置不正确，则可能会导致问题。检查Nginx配置中是否允许访问网站上的静态文件，同时确保Nginx运行时有权访问该文件。再不行就得查看日志，看看报啥错

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 以下回答来自chatgpt:

    答案：

    问题分析：

    从客户端浏览器访问服务器时，CSS背景图片无法显示，可能是因为该背景图片的路径设置不正确或者其他问题导致。

    解决方案：

    1. 检查CSS背景图片的路径问题：

    首先要确认图片路径是否正确，可以通过检查网页源码或者Nginx访问日志来判断。

    网页源码查看：

    可以在网页上点击右键，选择“查看网页源代码”，在源码里查找到背景图片的路径，看一下路径是否和文件存储位置一致。

    Nginx访问日志查看：

    可以查看Nginx访问日志，看一下是否有对应的图片被访问到。可以通过以下命令查看Nginx访问日志：

    $ tail -f /var/log/nginx/access.log

    在命令行中输入以上命令，会实时显示访问Nginx的客户端IP、访问时间、请求方法、请求的uri等信息，可以检查其中是否包含对应的图片访问请求信息。

    若路径不正确，则需要修正CSS文件中相应背景图片的路径设置。

    1. 检查文件权限问题：

    如果路径没有问题，那么就需要检查访问权限是否设置正确，如果没有权限则无法访问对应的背景图片，针对该问题可以通过以下两个步骤来解决：

    2.1 检查是否存在权限问题：

    可以先使用以下命令将所需文件的所有者改为Nginx进程用户（即在Nginx配置文件中设置的用户，一般为www-data或nginx等）：

    $ chown www-data:www-data /var/www/html/*

    其中/var/www/html/即网站根目录，将该目录下的文件和文件夹所属用户和用户组都改为www-data:www-data。

    2.2 检查SELinux和防火墙是否开启并设置正确的策略：

    可以通过以下命令关闭SELinux或者将防火墙策略设置成允许访问：

    关闭SELinux：

    $ setenforce 0 $ sed -i 's/SELINUX=enforcing/SELINUX=disabled/g' /etc/selinux/config

    设置防火墙策略：

    $ firewall-cmd --add-service=http --permanent $ firewall-cmd --add-service=https --permanent $ firewall-cmd --reload

    1. 检查图片格式是否正确：

    还有可能是因为图片格式不对，无法正常显示，尝试将图片保存为其他格式的图片或者更换其他背景图片来测试是否还是无法正常显示。

    1. 检查Nginx配置文件：

    最后可以检查Nginx配置文件中的相关设置，是否开启了gzip压缩导致出错。可以将相关设置注释掉进行测试，如果问题得到解决，则表示问题就出在Nginx配置文件中。

    总体可以采用前面的步骤逐一排查问题，找到错误后进行修复即可。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^