Отображение эффекта заката с градиентами над фоновым изображением в теле

Ну ... да, метапрограммирование шаблона не имеет побочных эффектов, поскольку оно предназначено. Я был введен в заблуждение от ошибок в более старых версиях GCC и немного неясной формулировки в Стандарте, чтобы полагать, что все эти функции возможны.

Однако, по крайней мере, функциональность области пространства имен может быть достигнута с небольшим использованием шаблонов. Функциональный поиск может извлекать числовое состояние из набора объявленных функций, как показано ниже.

Код библиотеки:

template< size_t n > // This type returns a number through function lookup.
struct cn // The function returns cn.
    { char data[ n + 1 ]; }; // The caller uses (sizeof fn() - 1).

template< typename id, size_t n, size_t acc >
cn< acc > seen( id, cn< n >, cn< acc > ); // Default fallback case.

/* Evaluate the counter by finding the last defined overload.
   Each function, when defined, alters the lookup sequence for lower-order
   functions. */
#define counter_read( id ) \
( sizeof seen( id(), cn< 1 >(), cn< \
( sizeof seen( id(), cn< 2 >(), cn< \
( sizeof seen( id(), cn< 4 >(), cn< \
( sizeof seen( id(), cn< 8 >(), cn< \
( sizeof seen( id(), cn< 16 >(), cn< \
( sizeof seen( id(), cn< 32 >(), cn< 0 \
/* Add more as desired; trimmed for Stack Overflow code block. */ \
                      >() ).data - 1 ) \
                      >() ).data - 1 ) \
                      >() ).data - 1 ) \
                      >() ).data - 1 ) \
                      >() ).data - 1 ) \
                      >() ).data - 1 )

/* Define a single new function with place-value equal to the bit flipped to 1
   by the increment operation.
   This is the lowest-magnitude function yet undefined in the current context
   of defined higher-magnitude functions. */
#define counter_inc( id ) \
cn< counter_read( id ) + 1 > \
seen( id, cn< ( counter_read( id ) + 1 ) & ~ counter_read( id ) >, \
          cn< ( counter_read( id ) + 1 ) & counter_read( id ) > )

Быстрая демонстрация ( см. Прогон ):

struct my_cnt {};

int const a = counter_read( my_cnt );
counter_inc( my_cnt );
counter_inc( my_cnt );
counter_inc( my_cnt );
counter_inc( my_cnt );
counter_inc( my_cnt );

int const b = counter_read( my_cnt );

counter_inc( my_cnt );

#include 

int main() {
    std::cout << a << ' ' << b << '\n';

    std::cout << counter_read( my_cnt ) << '\n';
}

C ++ 11 Обновление

Ниже приведена версия, использующая C ++ 11 constexpr вместо sizeof.

#define COUNTER_READ_CRUMB( TAG, RANK, ACC ) counter_crumb( TAG(), constant_index< RANK >(), constant_index< ACC >() )
#define COUNTER_READ( TAG ) COUNTER_READ_CRUMB( TAG, 1, COUNTER_READ_CRUMB( TAG, 2, COUNTER_READ_CRUMB( TAG, 4, COUNTER_READ_CRUMB( TAG, 8, \
    COUNTER_READ_CRUMB( TAG, 16, COUNTER_READ_CRUMB( TAG, 32, COUNTER_READ_CRUMB( TAG, 64, COUNTER_READ_CRUMB( TAG, 128, 0 ) ) ) ) ) ) ) )

#define COUNTER_INC( TAG ) \
constexpr \
constant_index< COUNTER_READ( TAG ) + 1 > \
counter_crumb( TAG, constant_index< ( COUNTER_READ( TAG ) + 1 ) & ~ COUNTER_READ( TAG ) >, \
                                                constant_index< ( COUNTER_READ( TAG ) + 1 ) & COUNTER_READ( TAG ) > ) { return {}; }

#define COUNTER_LINK_NAMESPACE( NS ) using NS::counter_crumb;

template< std::size_t n >
struct constant_index : std::integral_constant< std::size_t, n > {};

template< typename id, std::size_t rank, std::size_t acc >
constexpr constant_index< acc > counter_crumb( id, constant_index< rank >, constant_index< acc > ) { return {}; } // found by ADL via constant_index

http://ideone.com/yp19oo

Объявления должны помещаться внутри пространства имен, а все имена, используемые в макросах, кроме counter_crumb, должны быть полностью квалифицированный. Шаблон counter_crumb найден через ассоциацию ADL с типом constant_index.

Макрос COUNTER_LINK_NAMESPACE можно использовать для увеличения одного счетчика в области нескольких пространств имен.

0
задан Usama Shabbier 18 January 2019 в 09:25
поделиться

2 ответа

Вы можете сделать это с другим html-элементом внутри одного фонового изображения.

<div> // has your background image
  <div class="gradient"> // will have the gradiant style
  </div>
</div>

CSS

.gradient {
  background: linear-gradient( rgba(255,255,255,0.23) 0%, rgba(164,49,34, .85) 100%);
}

Вот пример Fiddle

  • Обратите внимание, я просто упростил градиент CSS. Сохраняйте свой стиль.

Подумайте, как вы используете тег body, как в настоящее время. Вы должны убедиться, что div внутри (с градиентом) расположен непосредственно над другим div. Может быть, вы должны сделать что-то вроде

.parent {
  // The element with the image
  position: relative;
}

.child {
  // the element with the gradient
  position absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
0
ответ дан Jonas Praem 18 January 2019 в 09:25
поделиться

Вы можете напрямую добавить градиент к другим фоновым изображениям (поскольку свойство градиента считается фоновым изображением), например, так:

body {
background-image: url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/left.png),
url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/right.png),
url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/sunsetbgbottom.png),
-webkit-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
}

Это сработало для меня, и гораздо проще добавлять дополнительные элементы. ;)

0
ответ дан Tobija Fischer 18 January 2019 в 09:25
поделиться
Другие вопросы по тегам:

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