我希望更改页面此部分的背景:
我想将其更改为空间的背景图像,我尝试使用CSS但它拒绝工作。我已经多次抬头了,但它唯一喜欢做的是勾勒div部分而不是实际改变里面的图像,为什么?
代码HTML:
<div class="section section-pad-sm section-bg section-pro into-section" id="intro">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5 section-four-image">
<div class="video-graph res-m-btm animated" data-animate="fadeInUp" data-delay=".1">
<div class="header-image section-third-image header-image-alt">
<img src="images/header-image-blue-old.png" alt="header">
</div>
</div>
</div>
<!-- .col -->
<div class="col-md-6 order-md-first order-last">
<div class="text-block">
<h6 class="heading-xs animated" data-animate="fadeInUp" data-delay=".0">What is Hashimo Shares? </h6>
<h2 class="animated" data-animate="fadeInUp" data-delay=".1">Hashimo Shares is a beautifully crafted
<br> Shared Masternode Service for Everyone! </h2>
所以第四。
CSS:
#intro {
background-color: blue;
background: grey;
color: blue;
}
我也尝试过:
#intro {
background-image: url('../images/header-shade.jpg');
background-repeat: repeat-y; /* for vertical repeat */
background-repeat: repeat-x; /* for horizontal repeat */
}
既没有奏效,也保持白色。但是试图用CSS概括它使它工作得很好,为什么?
我也尝试用JS修改它。
答案 0 :(得分:0)
您无法使用代码编辑图像。
解决方案1:无法使用代码更改图像,即该图像。要更改图像背景颜色,您只需使用照片编辑器填充它,然后在触发时更改图像。
解决方案2:如果您删除了背景,可能使用了this教程,并将那个放在div中,并在div的背景中填充了您的颜色,那么它可能会起作用。
教程可能很难,所以如果这不起作用,你可以查一查。
编辑:这不是这个人想要的,我会提出解决方案。
要更改背景颜色,请在CSS中添加body {backgrounds color: color;}
在HTML中,添加<html>
或<body>
标记bgcolor="hexadecimal"
,其中十六进制是十六进制格式所需的颜色。
注意:我不推荐第二个。
当然,如果您希望在事件发生后更改背景,我会使用jQuery .css();
函数
$("#div").mouseenter(function() {
$("body").css("background-color", "blue");
});
$("#div").mouseleave(function() {
$("body").css("background-color", "white");
});
&#13;
#div {
background-color: green;
margin-left: 100px;
margin-top: 100px;
height: 100px;
width: 150px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"> Hello </div>
&#13;
可以更改事件,可以更改发生的事件。这只是一个例子。
使用您的代码:
var background = 0;
$("#button").click(function() {
if (background == 0) {
$("#intro").css("background-color", "blue");
background = 1
} else {
$("#intro").css("background-color", "white");
background = 0
}
});
&#13;
#button {
width: 50px;
height: 50px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button"></button>
<!-- Start Section -->
<div class="section section-pad-sm section-bg section-pro into-section" id="intro">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5 section-four-image">
<div class="video-graph res-m-btm animated" data-animate="fadeInUp" data-delay=".1">
<div class="header-image section-third-image header-image-alt">
<img src="images/header-image-blue-old.png" alt="header">
</div>
</div>
</div>
<!-- .col -->
<div class="col-md-6 order-md-first order-last">
<div class="text-block">
<h6 class="heading-xs animated" data-animate="fadeInUp" data-delay=".0">What is Hashimo Shares? </h6>
<h2 class="animated" data-animate="fadeInUp" data-delay=".1">Hashimo Shares is a beautifully crafted
<br> Shared Masternode Service for Everyone! </h2>
<p class="lead animated" data-animate="fadeInUp" data-delay=".2">Test </p>
<p class="animated" data-animate="fadeInUp" data-delay=".3">Test</p>
<p class="animated" data-animate="fadeInUp" data-delay=".4">Test</p>
</div>
</div>
<!-- .col -->
</div>
<!-- .row -->
</div>
<!-- .conatiner -->
</div>
&#13;
正如你所看到的,我这样做是为了当你点击按钮时,它会使介绍div的背景变为蓝色,再次点击它会使它再次变白。
现在,如果你希望在启动时它是蓝色的,你可以这样做:
$("#intro").css("background-color", "blue");
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Start Section -->
<div class="section section-pad-sm section-bg section-pro into-section" id="intro">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5 section-four-image">
<div class="video-graph res-m-btm animated" data-animate="fadeInUp" data-delay=".1">
<div class="header-image section-third-image header-image-alt">
<img src="images/header-image-blue-old.png" alt="header">
</div>
</div>
</div>
<!-- .col -->
<div class="col-md-6 order-md-first order-last">
<div class="text-block">
<h6 class="heading-xs animated" data-animate="fadeInUp" data-delay=".0">What is Hashimo Shares? </h6>
<h2 class="animated" data-animate="fadeInUp" data-delay=".1">Hashimo Shares is a beautifully crafted
<br> Shared Masternode Service for Everyone! </h2>
<p class="lead animated" data-animate="fadeInUp" data-delay=".2">Test </p>
<p class="animated" data-animate="fadeInUp" data-delay=".3">Test</p>
<p class="animated" data-animate="fadeInUp" data-delay=".4">Test</p>
</div>
</div>
<!-- .col -->
</div>
<!-- .row -->
</div>
<!-- .conatiner -->
</div>
&#13;
我不建议这样做,但如果它不能与css一起工作,我想你将不得不这样做。
更新:在css块的末尾使用!important
,因为在您的文件&#39; style0ad1.css&#39;中,它声明了类section-pro
一种颜色并使其突出显示任何其他声明。
所以要把它作为你的空间背景:background: url("https://i.pinimg.com/originals/af/0f/c4/af0fc46fa7f05330435e9e71779af666.jpg") !important
尝试一下!