Question

我希望更改页面此部分的背景：

我想将其更改为空间的背景图像，我尝试使用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修改它。

Answer 1

您无法使用代码编辑图像。

解决方案1：无法使用代码更改图像，即该图像。要更改图像背景颜色，您只需使用照片编辑器填充它，然后在触发时更改图像。

解决方案2：如果您删除了背景，可能使用了this教程，并将那个放在div中，并在div的背景中填充了您的颜色，那么它可能会起作用。

教程可能很难，所以如果这不起作用，你可以查一查。

编辑：这不是这个人想要的，我会提出解决方案。

要更改背景颜色，请在CSS中添加body {backgrounds color: color;}

在HTML中，添加<html>或<body>标记bgcolor="hexadecimal"，其中十六进制是十六进制格式所需的颜色。

注意：我不推荐第二个。

当然，如果您希望在事件发生后更改背景，我会使用jQuery .css();函数

＆＃13;

$("#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;

可以更改事件，可以更改发生的事件。这只是一个例子。

使用您的代码：

＆＃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的背景变为蓝色，再次点击它会使它再次变白。

现在，如果你希望在启动时它是蓝色的，你可以这样做：

＆＃13;

$("#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

尝试一下！

DIV背景拒绝改变颜色或图像

1 个答案: