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>
您可以在发生 您还需要在css fil中添加几行,以便默认情况下隐藏 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).
In reality, the actual initials are coming from an Angular expression such as: I got a hint re: the use of
you can add a class to the image when the You will also need to add a couple of lines to your css fil so that it hides the
这篇关于CSS样式-如何显示一个人的姓名缩写或一个人的图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! onerror
事件时向图像添加一个类,然后使用该类显示/隐藏相邻的同级组合器 ./p>
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>
.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>
<span>{{ dataItem.personInitials }}</span>
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>
onerror
event happens and then use that class to show/hide the span
with the adjacent sibling combinator.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>