Question

我找到了这个我要修改的html代码，用于将图片加载到html代码中：

<section class="bg-img well-top">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-offset-2 col-sm-8">
                <form class="search-form" action="http://static.livedemo00.template-help.com/wt_57621/search.php" method="GET" accept-charset="utf-8">
                    <label class="search-form_label">
                        <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder="Search Scripts"/>
                        <span class="search-form_liveout"></span>
                    </label>
                    <button class="search-form_submit fa-search" type="submit"></button>
                </form>
            </div>
        </div>
    </div>
</section>

CSS代码：

.bg-img {
  background: no-repeat url(../images/bg-img.jpg);
  background-size: cover;
  padding-top: 90px;
  padding-bottom: 133px;
  text-align: center; }
  @media (max-width: 767px) {
    .bg-img {
      padding-top: 70px;
      padding-bottom: 80px; } }

我想将图片文件加载到html代码中。

Answer 1

有一个相对较新的css属性可以做你想要的，object-fit。它非常好support（微软除外 - pollyfill）。

将图片放入html非常简单，只需将img放在容器中.bg-img，即可占用相同的空间并应用object-fit: cover。只需确保调整图片z-index（因此它不会覆盖您的表单），.bg-img（技术上不再是一个非常好的类名）{ {1}}以便您的图片使用它进行定位。

＆＃13;

position: relative

＆＃13;

img {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
}

.bg-img {
    position: relative;
    padding-top: 90px;
    padding-bottom: 133px;
    text-align: center; 
    overflow: hidden;
}

@media (max-width: 767px) {
    .bg-img {
        padding-top: 70px;
        padding-bottom: 80px; 
    }
}

＆＃13;

我不知道你的其他风格是什么，如果它看起来与你想要的完全相同，但如果我理解你的问题，它应该是接近的。

Answer 2

我有第一个问题是为什么？您是否只想在HTML中加载图像代码并计划保持CSS的其余部分完整，或者您是否想要替换/删除所有CSS代码？

如果您正在寻找替换所有CSS代码并且只有HTML解决方案，那么很难获得与您找到的代码相同的视觉效果，因为有很多样式正在进行中CSS。

最简单的答案是使用style属性将背景图像移动到HTML文件中：

<section class="bg-img well-top" style="background-image: url(../images/bg-img.jpg);">
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-offset-2 col-sm-8">
            <form class="search-form" action="http://static.livedemo00.template-help.com/wt_57621/search.php" method="GET" accept-charset="utf-8">
                <label class="search-form_label">
                    <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder="Search Scripts"/>
                    <span class="search-form_liveout"></span>
                </label>
                <button class="search-form_submit fa-search" type="submit"></button>
            </form>
        </div>
    </div>
</div>

更新CSS以删除图片参考：

.bg-img {
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 90px;
  padding-bottom: 133px;
  text-align: center; 
}
@media (max-width: 767px) {
  .bg-img {
     padding-top: 70px;
     padding-bottom: 80px; 
  } 
}

Answer 3

你试过这个吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" style="width:50%;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi labore, amet iusto! Voluptatem rem, odit inventore alias mollitia aut possimus nostrum quaerat. Quaerat excepturi vitae eius, facere nobis dolores totam!</p>
</div>

<button id="button">Change</button>

使用DataURI，您可以将图像存储为html代码中的base64编码字符串。但是，URI会增加大约30％的图像大小。

后台内的Base64图像内容：url属性示例：

<section class="bg-img well-top" style="background: no-repeat url(../images/bg-img.jpg); background-size: cover;">
(...)

Answer 4

请指明您的观点，以便我可以为此安排完美的解决方案，好的，我们有两种方式：

使用css的背景图片对于任何类或ID或特定元素，您可以通过背景图像来完成：

.image-class, #image-id{
background:url(some_url);
height: it depends on container content otherwise write it here in px
}

另一种使用img标签的方法和使用js的特定id或类：

document.getElementbyID("image-id").innerHTML="<img src="image-url">";

如果innerHTML导致你出现问题，你可以使用jquery中的某些其他方法，比如append等。

如果您有任何其他问题，请告诉我

Answer 5

使用img src="filename.png" width="900" height="1200" style="border-radius: 20px;"等。您也可以根据需要设置宽度，高度和样式。在此之前，将图像设置为以png或jpg格式加载。要使图像居中，请使用命令<centre> </centre>

在html代码中加载图像

5 个答案: