Question

我想知道是否可以在HTML文档中创建一个行为类似于背景图像的图像（目前在CSS中完成）？原因是客户端可以通过CMS上传背景图像，而不是我自己不得不为CSS中的客户端手动执行它（他们无权访问）。

这是我想要创建的效果：http://codepen.io/anon/pen/wabjyg

HTML

<div>
  <h1>An example of text over an image</h1>
</div>

CSS

div {
  background: url(http://lorempixel.com/g/1100/300/) no-repeat;
  width:100%;
  height:100%;
  background-size:cover;
  }

其中一个就是将背景图像作为这样的内联样式...... http://codepen.io/anon/pen/aOrGYX - 这样我就可以在模板中创建一个动态标签，用于提取他们在CMS中上传的图像路径

HTML

<div style="background-image: url('http://lorempixel.com/g/1100/300')">
  <h1>An example of text over an image</h1>
</div>

CSS

div {
  background-repeat: no-repeat;
  width:100%;
  height:100%;
  background-size:cover;
  position:relative;
}

只是想知道是否有其他方法可以在HTML标记中使用内联样式？也许欺骗IMG标签的行为就像背景图像一样？

Answer 1

您可以使用object-fit让img像背景图片一样：

html, body {
  height:100%;
  margin:0;
  padding:0;
}

div {
  background-repeat: no-repeat;
  width:100%;
  height:100%;
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  font-family:sans-serif;
  margin:0;
  color:#fff;
  position:absolute;
  letter-spacing:-1px;
  text-align:center;
  left:50%;
  top:50%;
   text-shadow:0 0 30px rgba(0,0,0,0.8);
  -webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
  -webkit-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
  	transform: translateX(-50%);
}

<div>
  <img src="http://lorempixel.com/g/1100/300">
  <h1>An example of text over an image</h1>
</div>

Answer 2

经过一番谷歌搜索后，我找到了this教程，提供了不同的解决方案。

您可以在标题中添加额外的样式表，例如background.php

<link rel='stylesheet' type='text/css' href='css/background.php' />

在该文件中，您可以设置变量，并可以在样式表中使用它们，就像这样。

 <?php
        header("Content-type: text/css; charset: UTF-8");    

// DB Query here (or pass it with a function)

       $background = "/img/user/background/1.png";
    ?>

body, html { background: url(<?php echo $linkColor; ?>); }

希望它有所帮助。

在HTML中调用背景图像以进行动态加载

2 个答案: