html - 如何在不影响HTML和CSS背景图片的情况下调整图片

标签 html css

我正在尝试调整网页中心的 Logo ,但每当我在 CSS 文件中调整它时,背景都会受到更改的影响,因此顶部会有空白。

.bgimage {
    	width: 1903px;
    	height: 1000px;
    	background-image: url(https://drive.google.com/uc?id=1ZtitWTmH3qglyS7uv4X32GDQv35fmhwG);
    	background-attachment: fixed;
    	background-size: cover;
    	margin-top: 60px;
    	display: block;
    }
    
    
    
    .bgimage .ETLOGO {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 80px;
    	width: 40%;
    	height: 50%
    }
<div class="bgimage">
       <img src="https://drive.google.com/uc?id=1vXkFqCQzC7sagYCBOuAwDQMf-uhJTmAo" class="ETLOGO">
    </div>

Here is a photo of my website.

最佳答案

我认为您想要的是 Logo 顶部的填充,而不是边距。试试这个:

.bgimage {
  background-attachment: fixed;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/0f/MOS6581_chtaube061229.jpg);
  background-position: center;
  background-size: cover;
  height: calc(100vh - 50px);
  width: 100vw;
}

.bgimage .ETLOGO {
  display: block;
  height: 50%;
  margin: 0 auto;
  padding-top: 40px;
}
<div class="bgimage">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/440px-Intel-logo.svg.png" class="ETLOGO">
 </div>

关于html - 如何在不影响HTML和CSS背景图片的情况下调整图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55117548/

相关文章:

html - CSS 加载屏幕问题

javascript - 如何检查哪个资源导致网页加载缓慢

javascript - 修复可滚动 div 内的元素

html - 如何在提交按钮后关闭模态窗口?

css - 如何过滤 tr 最后一个 child 而不是第一个 child

php - 最近采访 Q - 为多个用户操作页面上的对象?

javascript - 将图像放在光滑的轮播前

html - css hover 只适用于 firefox

javascript - 在 vuejs 中包含一个外部 css 文件

javascript - 使用 JavaScript 修复位置变化