Angular не загружает стили полностью

Я следовал обычному методу включения стиля в компонент. но стили не отображаются в браузере. Однако среди многих отражается только одно свойство. если к классу применены свойства стиля 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>

Я только что добавил ответ. Похоже, в начале каждой строки были невидимые символы Юникода, которые портят CSS.

— 23.06.2018 09:59

css angular typescript

23.06.2018 08:27

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

172

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;
}

Не могли бы вы конкретно сообщить мне, что не так в CSS?

— 23.06.2018 09:26

23.06.2018 09:12

Ответ принят как подходящий

В 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>

23.06.2018 09:47

Другие вопросы по теме

Выражение изменилось после того, как была проверена ошибка

Получение значения выбора HTML и входного значения из submit angular 6

Связывание данных внутри ngFor

Как использовать функции JQuery в Angular 5?

Ленивая загрузка (loadChild) возвращает пустую страницу angular

Невозможно выровнять раскрывающийся список до следующей строки в angular2 +

Общий компонент кнопки в TypeScript, но событие не отображается на всех страницах (Angular 4)

Angular - Группировка нескольких ng-шаблонов и отображение скрытых при условии

Angular 4 сращивания дублирующих объектов массива

Почему Jhipster занимает более 2 ГБ памяти во время сборки?

Angular не загружает стили полностью

Ответы 2

Другие вопросы по теме

Похожие вопросы