CSS样式-如何显示一个人的姓名缩写或一个人的图像 [英] CSS styling - how to display a person's initials or a person's image

问题描述

使用这个可爱的html和CSS作为指导，我可以在照片上显示姓名缩写.

这很好，但是，如果图像不存在，我只想显示缩写.如果图像存在，则不应渲染任何peron缩写.

换句话说，当该图像存在时，该图像应覆盖缩写(以免看到缩写).

  .profile-dot {显示:-webkit-box;显示:-moz-box;显示:-ms-flexbox;显示:-webkit-flex;显示:flex;align-items:居中;证明内容:中心；高度:3rem；宽度:3rem;背景色:浅灰色；边界半径:50％；边框:灰色2px实线；背景尺寸:封面；背景位置:中心；背景重复:无；}.profile-dot span {字体粗细:700；颜色:#fff;字体样式:正常；字体大小:120％；}  

 < i class ="profile-dot" style ="background-image:url(https://i.stack.imgur.com/u20P2.jpg)>< span> BM</span></i>  

实际上，实际的缩写来自Angular表达式，例如:

 < span> {{dataItem.personInitials}}</span> 

我得到了一个提示:使用 figure ，但是我还没有到位-即

 < figure>< i class ="profile-dot">< img height ="30" width ="30" onerror ="this.style.display ='none'; this.className ="''src ="{{'./assets/profiles/Patients/'+ dataItem.UID +'.jpg'}}>< figcaption>< span> {{dataItem.PatientInitials}}</span></figcaption></i></figure>  

解决方案

您可以在发生 onerror 事件时向图像添加一个类，然后使用该类显示/隐藏相邻的同级组合器 ./p>

您还需要在css fil中添加几行，以便默认情况下隐藏 span ，并在图像包含该类时使其可见

  .profile-dot img + span {显示:无；/*默认隐藏它*/}.profile-dot img.broken-link + span {显示:块；/*仅在img具有类断开链接时显示*/}  

 < figure>< i class ="profile-dot">< img height ="30" width ="30" onerror ="this.style.display ='none'; this.className ='broken-link'" src ="{{'./assets/profiles/Patients/'+ dataItem.UID +'.jpg'}}">< span> {{dataItem.PatientInitials}}</span></i></figure>  

Using this lovely html and css as a guide, I'm able to display my initials over my photo.

This is great, however, I would like to display only the initials in the event the image does not exist; if the image exist, no peron initials should be rendered.

In other words, the image should overlay the initials when that image exists (so as NOT to see the initials).

.profile-dot {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  background-color: lightgray;
  border-radius: 50%;
  border: gray 2px solid;
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

.profile-dot span {
  font-weight: 700;
  color: #fff;
  font-style: normal;
  font-size: 120%;
}

<i class="profile-dot" style="background-image: url(https://i.stack.imgur.com/u20P2.jpg)">
  <span>BM</span>
</i>

In reality, the actual initials are coming from an Angular expression such as:

  <span>{{ dataItem.personInitials }}</span>

I got a hint re: the use of figure, but I'm not quite there yet - i.e.

<figure>
<i class="profile-dot">
	<img height="30" width="30" onerror="this.style.display='none'; this.className='' " src="{{ './assets/profiles/patients/' + dataItem.UID + '.jpg' }}"  >
	<figcaption>
		<span>{{ dataItem.patientInitials }}</span>
	</figcaption>
</i>
</figure>

解决方案

you can add a class to the image when the onerror event happens and then use that class to show/hide the span with the adjacent sibling combinator.

You will also need to add a couple of lines to your css fil so that it hides the span by default and it makes it visible when the image contains that class

.profile-dot img+span {
  display: none;/*Hide it by default*/
}

.profile-dot img.broken-link+span {
  display: block; /* only show when img has class broken-link*/
}

<figure>
  <i class="profile-dot">
	<img height="30" width="30" onerror="this.style.display='none'; this.className='broken-link' " src="{{ './assets/profiles/patients/' + dataItem.UID + '.jpg' }}"  >
        <span>{{ dataItem.patientInitials }}</span>
</i>
</figure>

这篇关于CSS样式-如何显示一个人的姓名缩写或一个人的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！