更改背景-image丝毫HTML和CSS
[英]change background -image whit html and css
问题描述
我想将此图片作为div下的背景，其中出现了GED SALC文字，但它无法正常工作..尽管我已经尝试过CSS，甚至通过以下方式强制使用了所有图片：
<body bgcolor="blue" background="images/sfondo.png">
这是代码：
<!DOCTYPE html> <?php session_start(); if(!isset($_SESSION["username"])){ header('location: ../index.php'); }else { ?> <html> <head> <title>GED</title> <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .bgimg-1{ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("images/sfondo.png"); min-height: 100%; } </style> </head> <body bgcolor="blue" background="images/sfondo.png"> <div class="w3-top"> <div class="w3-bar w3-padding w3-card" style="background-color: #ffc107"> <h1>GED - SALC</h1> </div> </div> <div class="w3-display-middle w3-contener" > <a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a> <div class="w3-center" style="margin-top: 40px;"> <a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Milano </a> <a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma </a> </div> </div> </body> </html> <?php } ?>
这是图像。BackGround图像
照片放在正确的网址中
有人知道如何帮助我吗？ PS ..我承认我已经使用了模板啊哈哈哈
5 个解决方案
解决方案1
0 2018-11-20 14:05:50
您创建了一个CSS类名.bgimg-1 ，但尚未在任何地方使用它。 您可能需要<body class="bgimg-1">以便为其分配CSS。
您还应确保文件位于指定的路径。 您可以通过检查<body>并单击背景URL在新选项卡中将其打开，以在Chrome开发工具中查找。 要么显示图像，要么会出现404错误。
解决方案2
0 2018-11-20 14:11:42
将您创建的类添加到body元素。
<!DOCTYPE html> <?php session_start(); if(!isset($_SESSION["username"])){ header('location: ../index.php'); }else { ?> <html> <head> <title>GED</title> <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .bgimg-1{ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("https://i.stack.imgur.com/TYX0B.png"); min-height: 100%; } </style> </head> <body class="bgimg-1" bgcolor="blue" background="images/sfondo.png"> <div class="w3-top"> <div class="w3-bar w3-padding w3-card" style="background-color: #ffc107"> <h1>GED - SALC</h1> </div> </div> <div class="w3-display-middle w3-contener" > <a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a> <div class="w3-center" style="margin-top: 40px;"> <a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Milano </a> <a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma </a> </div> </div> </body> </html> <?php } ?>
解决方案3
0 已采纳 2018-11-20 14:21:47
您已经设置了bgimg-1类。 您需要将类添加到body标签。 另外，您无需在body标签中使用background =“ images / sfondo.png”强制使用。
<body class="bgimg-1" bgcolor="blue">
查看下面的完整代码-
<!DOCTYPE html> <?php session_start(); if(!isset($_SESSION["username"])){ header('location: ../index.php'); }else { ?> <html> <head> <title>GED</title> <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .bgimg-1{ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("https://i.stack.imgur.com/TYX0B.png"); min-height: 100%; } </style> </head> <body class="bgimg-1"> <div class="w3-top"> <div class="w3-bar w3-padding w3-card" style="background-color: #ffc107"> <h1>GED - SALC</h1> </div> </div> <div class="w3-display-middle w3-contener" > <a class="w3-center w3-padding-large w3-black w3-xlarge w3-wide" style="margin-left: 22px;">Seleziona un operazione</a> <div class="w3-center" style="margin-top: 40px;"> <a href="../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Milano </a> <a href="azioniVisualizza/sceltaCantiere.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i>Roma </a> </div> </div> </body> </html> <?php } ?>
解决方案4
0 2018-11-20 14:23:34
首先，属性“ background”和“ bgcolor”是旧方法，并且不符合要求，因此应改用CSS background / background-color属性。
其次，阅读注释似乎您的路径不正确。
祝好运！
解决方案5
0 2018-11-20 15:14:05
请像这样在body标签中添加class属性
<body class="bgimg-1">
或者只是用这个替换
- 带着敬意。 凯维尔
通过单击图像，jQuery，HTML，CSS尝试更改背景图像
[英]Trying to change background image, by clicking on an image, jQuery, HTML, CSS
如何根据用户输入更改背景图像 | HTML, CSS, 刘先生
[英]How to Change Background Image Based on User Input | HTML, CSS, JS
将背景颜色更改[css]链接到背景图像更改[javascript]
[英]Linking background colour change [css] to background image change [javascript]
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.