Растягивайте и масштабируйте изображение CSS в фоновом режиме - только с CSS

Question

Растягивайте и масштабируйте изображение CSS в фоновом режиме - только с CSS

для Python3.6 Я нашел два драйвера: pymysql и mysqlclient. Я тестировал производительность между ними и получил результат: mysqlclient быстрее.

ниже - мой тестовый процесс (необходимо установить python lib profilehooks для анализа времени:

raw sql: select * from FOO;

немедленно выполняется в терминале mysql: 46410 rows in set (0.10 sec)

pymysql (2.4s):

from profilehooks import profile
import pymysql.cursors
import pymysql
connection = pymysql.connect(host='localhost', user='root', db='foo')
c = connection.cursor()

@profile(immediate=True)
def read_by_pymysql():
    c.execute("select * from FOO;")
    res = c.fetchall()

read_by_pymysql()

вот профиль pymysql:

mysqlclient (0.4s)

from profilehooks import profile
import MySQLdb

connection = MySQLdb.connect(host='localhost', user='root', db='foo')
c = connection.cursor()

@profile(immediate=True)
def read_by_mysqlclient():
    c.execute("select * from FOO;")
    res = c.fetchall()

read_by_mysqlclient()

вот профиль mysqlclient:

Итак, кажется, что mysqlclient намного быстрее, чем pymysql

809

background css

задан Community 23 May 2017 в 12:26

4 ответа

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

background css

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

score 0 · Answer 1

Вы хотите добиться этого с помощью одного изображения? Потому что вы можете сделать что-то похожее на растягивающийся фон, используя два изображения. Например, PNG изображения.

Я делал это раньше, и это не так сложно. Кроме того, я думаю, что растяжение только ухудшит качество фона. А если вы добавите большое изображение, это замедлит работу компьютеров и браузеров.

score 17 · Answer 2

Фактически вы можете добиться того же эффекта, что и фоновое изображение, с помощью тега img. Вам просто нужно установить его z-index ниже, чем у всего остального, установить position: absolute и использовать прозрачный фон для каждого поля на переднем плане.

score 183 · Answer 3

Using the code I mentioned...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

That produces the desired effect: only the content will scroll, not the background.

The background image resizes to the browser viewport for any screen size. When the content doesn't fit the browser viewport, and the user needs to scroll the page, the background image remains fixed in the viewport while the content scrolls.

With CSS 3 it seems this would be a lot easier.

score 8 · Answer 4

Спасибо!

Но тогда это не работало в браузерах Google Chrome и Safari (растягивание работало, но высота изображений составляла всего 2 мм!) , пока кто-то не сказал мне, чего не хватает:

Попробуйте установить height: auto; min-height: 100%;

Так измените это для вашей строки height: 100%; , даст :

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

Непосредственно перед этим недавно добавленным кодом у меня есть это в моем Drupal Tendu themes style.css :

html, body {height: 100%;}
#page {background: #ffffff; height: auto! important; height: 100%; min-height: 100%; position: relative;}

Затем мне нужно создать новый блок в Drupal с изображением при добавлении класса = stretch :

Простое копирование изображения с помощью редактора в этот блок Drupal не т работать; нужно сменить редактор на неформатированный текст.