代码之家 › 专栏 › 技术社区 › Ronald LaPlante

用CSS而不是HTML定义图像

background-image css html

Ronald LaPlante · 技术社区 · 6 年前

我有个问题,我不确定到底出了什么问题。

我有一个HTML页面,我的图片目前也被链接到其中。

<span class="tribar" onclick="openNav()"><img src="url_here"></span>

我试图从HTML源代码中删除所有的图像url,并将它们放在css中。这就是我尝试过的。

<span class="tribar" onclick="openNav()"></span> // HTML

.tribar {
display: inline-block;
background-image: url("image_url") no-repeat top left;
width: 220px;
height: 220px;
}

3 回复 | 直到 6 年前

Dániel Kis-Nagy 6 年前

<button> :

function opennav() {
  alert("Hello!");
}

.nav-button {
  border: none;
  background: none;
  font-size: 0; /*hide alt text*/
}

.nav-button:before {
  display: inline-block;
  content: url(http://placekitten.com/220/220);
  width: 220px;
  height: 220px;
  cursor: pointer;
}

<button class="nav-button" onclick="opennav()">Alt text for screen readers</button>

CodePen .

Roko 6 年前

你不能使用 “禁止重复” 内部价值财产。您应该在CSS样式中添加以下两行:

background-position: top left;
background-repeat: no-repeat;

如果你想在一行中完成,你应该使用属性:

background: url("image_url") no-repeat top left;

https://www.w3schools.com/cssref/pr_background-image.asp
https://www.w3schools.com/cssref/css3_pr_background.asp

DreamTeK 6 年前

只要链接的url或按钮的代码保持在页面上,就可以用css保存图像源。

我建议这样做:

a {
  display: block;
  width: 220px;
  height: 220px;
}

.tribar {
  display: block;
  background-image: url("https://jobadder.com/wp-content/uploads/stackoverflow.com-300.jpg");
  background-size: contain;
  width: 100%;
  height: 100%;
}

<a href="#"><span class="tribar" /></a>

推荐文章

Vida Khalili · 如何在Nextjs中设置背景图像?

2 年前

Laiqa Mohid · 反应-在使用SVG作为背景图像属性中的数据时,尝试将SVG填充颜色作为道具传递?

2 年前

user8076620 · javascript如何使用style属性查找包含背景图像的元素

6 年前

h2odev · 在具有动态宽度的div元素上调整背景图像

6 年前

Chris · 如何使用CSS缩放手机背景图像?

6 年前

Chris McCarthy · 如何在matplotlib雷达图中添加轮盘赌背景图像

6 年前

Fahim Parkar · UITextView背景图像正在滚动多行

6 年前

Polygami · 保持图像居中,同时保持100%的高度,仅延伸/裁剪侧面

6 年前

AlphaX · 如何交换透明背景图像

6 年前

TJ1 · 更改圆的背景图像

6 年前