Могу ли я добавить логотип на каждый слайд шаблона xaringan с помощью css? - PullRequest
Новая
       6

Могу ли я добавить логотип на каждый слайд шаблона xaringan с помощью css?

0 голосов
/ 31 января 2019

Я хотел бы адаптировать предоставленный файл .css здесь , чтобы включить маленький логотип в верхнем правом углу каждого слайда, кроме заголовка, обратного и последнего слайда.В идеале я могу просто добавить что-то простое в файл .css, а не вручную кодировать каждый слайд презентации.

Я пытался добавить это 

background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;

к 

.remark-slide-content {
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

для получения 

.remark-slide-content {
background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

изображение отображается на всех слайдах, включая заголовок и переход.Он даже перезаписывает изображение .title-slide.

1 Ответ

0 голосов
/ 31 января 2019

Вы можете сделать следующее, чтобы исключить title-slide: 

.remark-slide-content:not(.title-slide){
  background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

, но недостатком этого является то, что если у вас есть фоновое изображение на других слайдах, оно будет перезаписывать изображение выше.Таким образом, вы можете определить другой класс, например, exclude: 

.remark-slide-content:not(.exclude){
  background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

.logopos {
  position: absolute;
  top: 9%;
  left: 15%;
}

и для соответствующего слайда, у которого есть проблема с другим фоновым изображением, отключите его и добавьте его вручную.Например, 

class: exclude 
background-image: url("bla")

content

<img class="logopos" src="https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png">
...