Question

我遵循了将样式包含在组件中的常规方法。但样式不会反映在浏览器中。但是，只有一种属性反映在许多属性中。如果已将 6 样式属性应用于仅反映类的 1 属性。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'userbar',
  templateUrl: './userbar.component.html',
  styleUrls: ['./userbar.component.css']
})
export class UserbarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

#userbar #wallpicture {
  background-image: url("https://i.pinimg.com/originals/73/d5/d4/73d5d48c16adf342d4364d027053176b.jpg");
  background-size: 100%;
  height: 95px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-position: 0px 50%;
  width: 100%;
  padding: 0px;
}
#userbar {
  width: 100%;
}
#userbar #profilepicture {
 border-radius: 50%;
 position: relative;
 left: -webkit-calc(100% - 350px);
  left: -moz-calc(100% - 350px);
 left: calc(50% - 32px);
 top: 64px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="userbar">
  <div id="picturesection">
    <div id="wallpicture">
      <img id="profilepicture" src="/assets/images/general/userimage.png">
    </div>
  </div>
</div>

Answer 1

CSS中存在一些非法字符，特别是“对象替换字符”（U + FFFC）

删除每行开头的所有空白字符，并用空格替换

它应该在下面的代码段中运行。为了测试它，我已经用绝对URL替换了相对URL。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'userbar',
  templateUrl: './userbar.component.html',
  styleUrls: ['./userbar.component.css']
})
export class UserbarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

#userbar #wallpicture {
  background-image: url("https://i.pinimg.com/originals/73/d5/d4/73d5d48c16adf342d4364d027053176b.jpg");
  background-size: 100%;
  height: 95px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-position: 0px 50%;
  width: 100%;
  padding: 0px;
}
#userbar {
  width: 100%;
}
#userbar #profilepicture {
  border-radius: 50%;
  position: relative;
  left: -webkit-calc(100% - 350px);
  left: -moz-calc(100% - 350px);
  left: calc(50% - 32px);
  top: 64px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="userbar">
  <div id="picturesection">
    <div id="wallpicture">
      <img id="profilepicture" src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Cute-Whatsapp-DP.jpg">
    </div>
  </div>
</div>

Answer 2

请检查您的CSS。

#userbar，#wallpicture

#userbar, #wallpicture {
  background-image: url("https://i.pinimg.com/originals/73/d5/d4/73d5d48c16adf342d4364d027053176b.jpg");
  background-size: 100%;
  height: 95px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-position: 0px 50%;
  width: 100%;
  padding: 0px;
}
#userbar {
  width: 100%;
}
#userbar, #profilepicture {
 border-radius: 50%;
 position: relative;
 left: -webkit-calc(100% - 350px);
  left: -moz-calc(100% - 350px);
 left: calc(50% - 32px);
 top: 64px;
}

Angular无法完全加载样式

2 个答案: