Question

我希望能够在点击class1中的图片时访问Google。任何帮助，将不胜感激。我的html中有这个：

    <div class="one">
        <ul class="two">
            <li class="class1"><a href="www.google.com"></a></li>
            <li class="class2"><a href="www.google.com"></a></li>
        </ul>
    </div>

我的css中有这个：

    .class1 {
       background-image:url(image/url.png);
       background-repeat: no-repeat;
    }

     .class1:hover {
       background-image:url(imagehover/url.png);
       background-repeat: no-repeat;
    }

Answer 1

只需在CSS中将<a>设置为display: block;，然后在HTML中输入 （以确保元素显示）

Answer 2

<img>中没有.class1元素，只有空<a>元素，这意味着它的高度和宽度都为零。父<li>元素也是如此。这就是您无法看到背景图像的原因。

通过为display: inline-block元素添加类似<a>的样式，您可以为其提供宽度和高度。

（此外，为了切换背景图片，定位链接本身可能更有意义，例如.two a和.two a:hover。）

Demo fiddle

Answer 3

试试此代码

  .class1 {
       background-image:url('https://assets.servedby-buysellads.com/p/manage/asset/id/33430');
       background-repeat: no-repeat;
      
    }
.class1 a{display: block}

  <div class="one">
        <ul class="two">
            <li class="class1"><a href="http://www.google.com" target="_blank">&nbsp;</a></li>
            <li class="class2"><a href="http://www.google.com"></a></li>
        </ul>
    </div>

Answer 4

您的authenticate(authRequest: login): Observable<user> { let url: string = this.apiUrl + AppSettings.LOGIN_SERVICE; let headers = new Headers({ 'Content-Type': AppSettings.CONTENT_TYPE_HEADER }); let options = new RequestOptions({ headers: headers }); return this._http.post(url, authRequest, options) // ...using post request .map(this.authenticated) .catch(this.handleError); //.catch(this.handleError); } private authenticated(res: Response) { let body = res.json(); if (body.StatusCode === 200) { localStorage.setItem('auth_token', res.headers.get("access-token")); //This is the event declared at the class level. //The following line of code is the one giving the error - cannot execute emit on undefined this.authEvent.emit(true); return body.Data || {}; } else { return {}; } }代码需要内容，例如一些文字或<a href> <img>标记将其内容转换为可点击/可导航的内容，但它们都没有内容。

此外，每个a内的链接应以href或http://开头，否则您的浏览器会尝试在托管您的html页面的同一台服务器上按该名称打开一个页面

Answer 5

display: block 对您不起作用，因为您的<a>位于列表项<li>内。

因此，请在您的display: list-item上使用 <a> ：

.class1 a { 
   display: list-item; 
}

Answer 6

你去吧

ul li {
        list-style: none;
    }
    ul li a{
        display: block;
        height: 90px;
        width: 125px;
        cursor: pointer;
        border:1px solid #ddd;
    }
    .class1 {
       background-image:url('https://cdn1.iconfinder.com/data/icons/company-identity/100/Google_2015_logo-128.png');
       background-repeat: no-repeat;
    }

     .class2 {
       background-image:url('https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/facebook-128.png');
       background-repeat: no-repeat;
    }

<div class="one">
        <ul class="two">
            <li><a href="https://www.google.com" class="class1" target="blank"></a></li>
            <li><a href="https://www.facebook.com" class="class2" target="blank"></a></li>
        </ul>
    </div>

Answer 7

Fiddle

如果您希望Google在同一页面中打开，请使用target="_self"，而不是target="_blank"

   background-image:url(http://gallery.photo.net/photo/5911468-md.jpg);
   background-repeat: no-repeat;
   background-size: 300px;
   display:block;
   background-size: 300px;
   background-position: center;
   width: 190px;
   height: 190px;
   cursor: pointer;
   overflow: hidden;
   text-indent: 100%;
   white-space:nowrap;

Answer 8

或者，您可以使用本机块元素

import { Component , Input } from '@angular/core';
import { ColorService } from '../colors.service';

@Component({
  moduleId: module.id,
  selector: 'search-form',
  templateUrl: 'search-form.component.html',
  styleUrls: [ 'search-form.component.css']
})

export class SearchFormComponent {
    @Input() colors : ColorService;

    onTagsAdded(tag) {
        console.log(this.colors);
    }
}

图像作为列表中的链接

8 个答案: