javascript - 如何使图像不透明并且文本不在其旁边滚动？-6ren

javascript - 如何使图像不透明并且文本不在其旁边滚动？

转载作者：行者123 更新时间：2023-11-27 23:19:17

这是我第一次用 HTML 语言写作，如果我不尊重语言格式标准，请原谅我。

function show_or_hide_Block(show_hide){
    if (document.getElementById(show_hide).className == 'hide') {
        document.getElementById(show_hide).className = "show";} 
	else{document.getElementById(show_hide).className = "hide";}
}

	function banner_adapt () {
		var b = document.getElementById("banner");
		b.style.maxWidth="100%";
		var p = document.getElementById("body_text");
			if (b.width >= 700){
				//alert("actual: " + b.width + " too large, setting to 700px.")
				b.style.maxWidth="700px";
			} else if (b.width < 700){
				//alert("Enought small to set 100%.")
				b.style.maxWidth="100%";}
			//alert("setting lar to:" + (Math.round(b.width/1600*449)+10) + "px");
			p.style.marginTop=(Math.round(b.width/1600*449)+10)+ "px";
			
	}

		$(window).load(function(){
			banner_adapt();
		});
		$(document).ready(function(){
  		$(window).resize(function(){
			banner_adapt();
		});
		});

body {
  background-color: #f6db75;
}

separatore_iniziale {
  margin-top: 60px;
  }

top_menu {
  font-size: 18px;
	position: fixed;
	top: 10px;
  }

bottom_menu {
  font-size: 18px;
	position: fixed;
	bottom: 25px;
  }

.ver {
  font-size: 14px;
	margin-top: 0px;
	margin-bottom: 0px;
  }

.altro {
  font-size: 18px;
	margin-top: 0px;
	margin-bottom: 0px;
  }
p{
	z-index: 2;
}

h1{
  margin-top: 0;
	margin-bottom: 0px;
  }

h2{
  font-size: 18px;
	margin-top: 0;
	margin-bottom: 10px;
  }

h3{
  font-size: 14px;
	margin-top: 5px;
	margin-bottom: 10px;
  }

h3.hide {
  display: none;
}

h3.show {
  
}

h4{
  margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 20px;
	text-align: justify;
  }

.tab {
  margin-left: 150px;
  margin-right: 20px;
  text-align: justify;
  }


ul {
  margin-top: 10px;
	margin-bottom: 10px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">

</head>
<body>
<top_menu>
<h1><a  href="./index.html">
<img  id="banner" style="max-width:300px;" src="https://i.ibb.co/7Q7rt2k/Banner-prova.png"></a>
</h1>
<br>
<h2><a>Homepage</a></h2>
<h2><a onClick="show_or_hide_Block('downloads_platforms')" href="javascript:void(0);">Downloads</a></h2>
<h3 id="downloads_platforms" class = "hide">
	&gt;<a href="..">Windows</a>
	<br><br>
	&gt;<a href="..">Mac OS X</a>
	<br><br>
	&gt;<a href="..">Linux/Ubuntu</a>
</h3>
</top_menu>
<p id="body_text" style="margin-top:227px;" >
	<h4>Write something above</h4>
	<div class="tab">
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	</div>

	<h4>Do you have some text?</h4>
	<div class="tab">
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</div>

	<h4>Question</h4>	
	<div class="tab">List of points
	<ul>
		<li >point1;</li>
		<li >point1</li>
		<li >point1</li>
		<li >point1</li>
		</ul></div>
	<div class="tab">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	</div>
</p>
<bottom_menu> 
	<a class="ver">(v 2.0)</a><br>
	<a class="altro"><a href="./index.html">Back to index</a></a>
</bottom_menu>	
</body>

</html>

如您所见，我将图像放在 h1 标签中，并固定在 style.css 中。然后我想让图像适应在其中查看的窗口，所以我制作了一个可以适应图像和文本边距顶部的 JS。问题是我的图像是透明的，它没有填满窗口的宽度，所以文本可以在图像后面和旁边滚动。我不希望文本在旁边或后面滚动。如何才能做到这一点？提前致谢

最佳答案

我把背景颜色: ;向右填充:100%；

现在文字不会显示在图片广告的后面。

function show_or_hide_Block(show_hide){
    if (document.getElementById(show_hide).className == 'hide') {
        document.getElementById(show_hide).className = "show";} 
	else{document.getElementById(show_hide).className = "hide";}
}

	function banner_adapt () {
		var b = document.getElementById("banner");
		b.style.maxWidth="100%";
		var p = document.getElementById("body_text");
			if (b.width >= 700){
				//alert("actual: " + b.width + " too large, setting to 700px.")
				b.style.maxWidth="700px";
			} else if (b.width < 700){
				//alert("Enought small to set 100%.")
				b.style.maxWidth="100%";}
			//alert("setting lar to:" + (Math.round(b.width/1600*449)+10) + "px");
			p.style.marginTop=(Math.round(b.width/1600*449)+10)+ "px";
			
	}

		$(window).load(function(){
			banner_adapt();
		});
		$(document).ready(function(){
  		$(window).resize(function(){
			banner_adapt();
		});
		});

body {
  background-color: #f6db75;
}

separatore_iniziale {
  margin-top: 60px;
  }

top_menu {
  font-size: 18px;
	position: fixed;
	top: 10px;
  }

bottom_menu {
  font-size: 18px;
	position: fixed;
	bottom: 25px;
  }

.ver {
  font-size: 14px;
	margin-top: 0px;
	margin-bottom: 0px;
  }

.altro {
  font-size: 18px;
	margin-top: 0px;
	margin-bottom: 0px;
  }
p{
	z-index: 2;
}

h1{
  margin-top: 0;
	margin-bottom: 0px;
  }

h2{
  font-size: 18px;
	margin-top: 0;
	margin-bottom: 10px;
  }

h3{
  font-size: 14px;
	margin-top: 5px;
	margin-bottom: 10px;
  }

h3.hide {
  display: none;
}

h3.show {
  
}

h4{
  margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 20px;
	text-align: justify;
  }

.tab {
  margin-left: 150px;
  margin-right: 20px;
  text-align: justify;
  }


ul {
  margin-top: 10px;
	margin-bottom: 10px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">

</head>
<body>
<top_menu>
<h1><a  href="./index.html">
<img  id="banner" style="max-width:300px; background-color: #EC3711; padding-right:100%;" src="https://i.ibb.co/7Q7rt2k/Banner-prova.png"></a>
</h1>
<br>
<h2><a>Homepage</a></h2>
<h2><a onClick="show_or_hide_Block('downloads_platforms')" href="javascript:void(0);">Downloads</a></h2>
<h3 id="downloads_platforms" class = "hide">
	&gt;<a href="..">Windows</a>
	<br><br>
	&gt;<a href="..">Mac OS X</a>
	<br><br>
	&gt;<a href="..">Linux/Ubuntu</a>
</h3>
</top_menu>
<p id="body_text" style="margin-top:227px;" >
	<h4>Write something above</h4>
	<div class="tab">
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	</div>

	<h4>Do you have some text?</h4>
	<div class="tab">
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</div>

	<h4>Question</h4>	
	<div class="tab">List of points
	<ul>
		<li >point1;</li>
		<li >point1</li>
		<li >point1</li>
		<li >point1</li>
		</ul></div>
	<div class="tab">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	</div>
</p>
<bottom_menu> 
	<a class="ver">(v 2.0)</a><br>
	<a class="altro"><a href="./index.html">Back to index</a></a>
</bottom_menu>	
</body>

</html>

关于javascript - 如何使图像不透明并且文本不在其旁边滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58107921/

文章推荐： html - Fancybox 导致分屏布局滚动位置重置为顶部

文章推荐： html - 提交按钮不会正确排列

文章推荐： html - 为什么 inner tbody 不拉伸(stretch)？

iphone - 禁用时避免使 UIButton 透明/透明
我想禁用我的 UIButton，所以我调用: button.enabled = FALSE; 然而，这会使按钮变得透明，我可以看到它下面的元素。我不介意它改变颜色，我只是不希望它是透明的。我尝试在
swift - 当 isEnabled 为 false(禁用)时避免使 NSButton 透明/透明
一个常规的 NSButton 如果被禁用，它似乎是透明的。图像显示了一个样式为“push”的按钮但是，我想禁用没有透明度的按钮。我试图以编程方式将 alphaValue 设置为 1.0 但似乎
video - 透明.mov视频转换成具有透明背景ffmpeg的png序列
我正在尝试将Memoji从iPhone/Mac转换为具有透明背景的一系列png，以便我可以创建一个 Sprite 表。当按下空格键时，我可以清楚地看到它具有透明背景，但是在运行 ffmpeg -i s
tornadofx - 透明 View
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像我在JavaFx中使用了这种场景，我必须将场景填充设置为空，并将根节点背景颜色设置为透明。我
tornadofx - 透明 View
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像我在JavaFx中使用了这种场景，我必须将场景填充设置为空，并将根节点背景颜色设置为透明。我
java - 透明 JDesktopPane
我想将 JDesktopPane 设置为透明，并允许我单击下面的内容(例如桌面图标等)。内部框架应保持不透明，并且能够像当前一样在屏幕周围重新定位。有什么想法吗？ package test1;
java - 透明.png背景
我知道我不是第一个提出此类问题的人，但我认为我的问题有点不同。我在 MS Paint 上绘制了一个 png 图像，它是一个播放器，当我使用图形对象绘制图像时，我希望图像的背景是透明的。我尝试了一些带
swift - 如何设置单选按钮的背景不透明/透明？
我在 Mac 的 swift 项目中想使用单选按钮，但与我的背景颜色相同。如何将背景设置为不透明或更改背景颜色？最佳答案我找到了解决此问题的方法。将单选按钮的文本设置为“”，将 rb 添加到水平堆
Android RelativeLayout 透明
我无法将我的相对布局设置为透明。我尝试了很多不同的方法，从类中自定义 View ，添加 android:background="@android:color/transparent"等。它们要么像下图
ios - UINavigationController工具栏100%透明
在 Storyboard中，我创建了一个 ![UINavigationController] 及其 Root View Controller UIViewcontroller。在工具栏中，我有一个分段
Swift 透明 UINavigationBar
我必须让我的导航栏透明，我试过这段代码: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIB
ios - 透明查看颜色从黑色到其他颜色？
我注意到，如果我将 View 背景颜色设置为透明，则在 segue 过渡结束后背景颜色会变成黑色(我猜这是默认的“视口(viewport)”颜色)。我可以改变吗？当然，我可以将颜色从透明更改为紫色，
html - 如何使滚动条不可见-透明
嘿，有没有可能让滚动条“隐藏”，我不想使用 overflow-y: hidden就像背景:透明或类似的东西最佳答案 Here您会找到有关如何仅使用 CSS 隐藏滚动条的说明。在第二个example
javascript - 如何使谷歌自定义搜索引擎的背景(透明)？
默认情况下，背景显示为白色。是否可以通过任何方式将其背景颜色更改为透明..？ (function() { var cx = '005519348941191855053:d0uziw7c
html - 左右边缘的插图框阴影褪色/透明
我正在尝试添加一个在 div 的左右边缘具有透明度/淡出的嵌入框阴影。我设法添加了一个普通的嵌入框阴影，但我不知道如何为边缘添加透明度。我该怎么做？这是我正在努力实现的一个例子。 .contai
html - 透明、无边框的文本输入
如何删除周围的边框并使其背景透明？最佳答案试试这个: border: none; border-color: transparent; 关于html - 透明、无边框的文本输入，我们在Stac
java - 透明 JButton
是否可以使 JButton 透明(包括边框)而不是文本？我扩展了 swing 的 JButton 并覆盖了它: @Override public void paint(Graphics g) {
c++ - 如何创建半透明/透明 `QOpenGLWindow`
众所周知，要使QWidget/QOpenGLWidget半透明/透明，只需: widget->setAttribute(Qt::WA_TranslucentBackground) 但是，由于 QWin
Ubuntu 透明 Gnome 终端
我想知道如何在 Ubuntu 中为所有应用程序制作透明 Gnome 终端，我知道我们可以为桌面制作透明终端，而不是为所有应用程序制作透明终端。我用谷歌搜索了很多，但找不到任何解决方案。谁能告诉我该怎么
eclipse - 透明 SWT Canvas
我想让 SWT Canvas 的背景透明，以便可以看到它后面的其他小部件。我尝试将 alpha 设置为 0 并用矩形填充 Canvas ，并且还使用选项 SWT.NO_BACKGROUND 无济于事

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何使图像不透明并且文本不在其旁边滚动？