个人中心
gpt4 book ai didi

javascript - 响应式 html img 背景

转载 作者：行者123 更新时间：2023-11-30 14:16:03 24 4
gpt4 key购买 nike

大家好，大家一直在寻找头灯的日子，这样我的菜单背景就可以完整地看到下面的图片了..但是我找不到解决方案..虽然我已经改变了图片的大小，尽管制作了 react 灵敏..我附上了我的代码和相关照片的证据......

<!DOCTYPE html>
<?php 
	session_start();
    if(!isset($_SESSION["username"])){
    	header('location: ../index.php');
    }else
    {
    
?>
<html>
	<head>
    <title>G.E.D.</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");
			}
		</style>
		<style>
		   .w3-button
		   {
			   background-color:#FFFF;
		   }
		   .tuodiv 
		{
					width: 100%; height: 100%; top: 0; left: 0;
					background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					background-size: cover;
		}
		 
.img {
    max-width: 100%;
}
 
	.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}
		</style>
	</head>
	
<body >
<img src="images/img/sfondo.png" style="background-position:center;"class="img-responsive" alt="Responsive image" />
 
		<div class="w3-top">
			
			<div class="iltuoid">		
		</div>
		</div>
			<div class="w3-display-middle w3-contener" >
			<br><br><br><br>			<br><br><br><br>

			
				<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" style="background-color:#FFFF;"><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>
			</div>
	</body>
</html>
<?php } ?>

my Image

总是有一个小剪裁......或者图像太大然后向下移动页面

最佳答案 

<html>
	<head>
    <title>G.E.D.</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");
			}
		</style>
		<style>
		   .w3-button
		   {
			   background-color:#FFFF;
		   }
		   .tuodiv 
		{
					width: 100%; height: 100%; top: 0; left: 0;
					background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					background-size: cover;
		}
		 
.img {
    max-width: 100%;
}
 
	.img-responsive {
    background:url("/image/VOGIV.png") no-repeat;
    width 100vw;
    height:100vh;
    background-size:100% 100%;
}
		</style>
	</head>
	
<body >
<div class="img-responsive" ></div>
 
		<div class="w3-top">
			
			<div class="iltuoid">		
		</div>
		</div>
			<div class="w3-display-middle w3-contener" >
			<br><br><br><br>			<br><br><br><br>

			
				<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" style="background-color:#FFFF;"><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>
			</div>
	</body>
</html>

关于javascript - 响应式 html img 背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53559120/

24 4 0
文章推荐： ios - Swift 1.2 UICollectionViewController if 语句与 UICollectionViewCell Image
文章推荐： c# - 在 Try/Catch 中处理 Application.ThreadException 和包装 Application.Run 之间的区别
文章推荐： swift - 暂停和重新启动动画
文章推荐： c# - WP7 在 PeriodicTask 上 25 秒后调用 NotifyComplete()
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com